CSS 右侧不透明度?
CSS Opacaity on right?
我很好奇有没有什么CSS可以在右侧设置不透明度?
.test {
height: auto;
width: 300px;
background: #000;
opacity: 0.6;
color: #fff;
text-align: center;
padding: 10px;
}
<div class="test">Testing</div>
使用伪元素:
只需创建两个伪元素 (:before
/:after
)。将它们相对于父元素 relative 定位。给它们一个 50%
的宽度,并指定其中一个的不透明度。
.test {
width: 300px;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
}
.test:before, .test:after {
content: '';
background: #000;
position: absolute;
width: 50%;
top: 0; bottom: 0;
z-index: -1;
}
.test:before {
left: 0;
}
.test:after {
right: 0;
opacity: 0.6;
}
<div class="test">Testing</div>
使用CSS3 linear-gradients:
或者,您也可以使用 CSS3 linear-gradients。在这种情况下:
background-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, 0.6) 50%);
.test {
width: 300px;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
background-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, 0.6) 50%);
}
<div class="test">Testing</div>
您可以随时使用 CSS 渐变。它们易于使用,也很容易制作。
我很好奇有没有什么CSS可以在右侧设置不透明度?
.test {
height: auto;
width: 300px;
background: #000;
opacity: 0.6;
color: #fff;
text-align: center;
padding: 10px;
}
<div class="test">Testing</div>
使用伪元素:
只需创建两个伪元素 (:before
/:after
)。将它们相对于父元素 relative 定位。给它们一个 50%
的宽度,并指定其中一个的不透明度。
.test {
width: 300px;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
}
.test:before, .test:after {
content: '';
background: #000;
position: absolute;
width: 50%;
top: 0; bottom: 0;
z-index: -1;
}
.test:before {
left: 0;
}
.test:after {
right: 0;
opacity: 0.6;
}
<div class="test">Testing</div>
使用CSS3 linear-gradients:
或者,您也可以使用 CSS3 linear-gradients。在这种情况下:
background-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, 0.6) 50%);
.test {
width: 300px;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
background-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, 0.6) 50%);
}
<div class="test">Testing</div>
您可以随时使用 CSS 渐变。它们易于使用,也很容易制作。