首页 > 其他 > 详细

背景小实例

时间:2019-07-13 09:11:27      阅读:106      评论:0      收藏:0      [点我收藏+]

1.背景颜色

 技术分享图片

 

2.可用性强的背景图片

技术分享图片

3.背景图片小案列

 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px)

.demo1{
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
}
.demo1:before{
background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;/*-1 可以当背景*/
-webkit-filter: blur(3px);
filter: blur(3px);
}
<div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>

技术分享图片

--------------------- 
作者:Joker_Ye 
来源:CSDN 
原文:https://blog.csdn.net/hj7jay/article/details/73480609 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

背景小实例

原文:https://www.cnblogs.com/yanyanstyle/p/11178924.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!