CSS - div 背景有透明度但文字不透明
2022-01-20 •
1 条评论
/*background: #26272d;*/
background-color: rgba(38, 39, 45, 0.7);
position: relative;
/*opacity: 0.7;*/
filter: Alpha(opacity=70);
/*background: #26272d;*/
background-color: rgba(38, 39, 45, 0.7);
position: relative;
/*opacity: 0.7;*/
filter: Alpha(opacity=70);
@font-face {
font-family: 'pingFangSC-Regular';
src: url('../font/PingFang.ttf');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'pingFangSC-Regular';
}
#test a:hover {
text-decoration: none;
background: url("http://xiaowiba.com/demo/svg/test-ahover.svg")
repeat-x 0 100% !important;
background-size: 20px auto !important;
animation: waveMove 1s infinite linear !important;
}
#lineTd {
width: 200px;
color: #000000;
font-size: 30px;
text-align: center;
font-weight: 100;
border-bottom: 1px solid #6BA1FF;
height: 130px;
box-sizing: border-box;
text-indent: 0;
background: linear-gradient(33deg, transparent 49.5%, #CDD4F3 49.5%, #CDD4F3 50.5%, transparent 50.5%);
}
可以让某个元素实现类似于海市蜃楼的效果,可以看的到某个元素,但是你无法摸的着。
pointer-events: none;
// 纵向:
@page { size: portrait; }
// 横向:
@page { size: landscape; }
.index-product-main {
box-shadow: #abc6fb 0 0 18px inset;/*内部阴影*/
padding: 20px;
border: 1px solid #abc6fb;
border-radius: 3px;
background-image:url("../img/index/product/left-top.png"),url("../img/index/product/right-top.png"),url("../img/index/product/left-bottom.png"),url("../img/index/product/right-bottom.png");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom, right bottom;
}