• 技术文章 >web前端 >css教程

    css怎么设置背景图片透明

    青灯夜游青灯夜游2021-10-12 18:23:59原创154

    在css中,可以利用opacity属性来设置背景图片透明,该属性的作用就是设置元素的透明度,只需要给设置了背景图片的元素添加“opacity: 透明度值;”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以利用opacity属性来设置背景图片透明。

    Opacity属性设置一个元素了透明度级别,透明度级别(属性值)从0.0(完全透明)到1.0(完全不透明)。

    代码示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			div{
    				width: 400px;
    				height: 230px;
    				background:url(img/3.jpg) no-repeat;
    				background-size: 400px 226px;
    			}
    			.box{
    				opacity: 0.5;
    			}
    		</style>
    	</head>
    
    	<body>	
    		<div></div> 
            <div class="box"></div> 
    	</body>
    
    </html>

    效果图:

    1.png

    (学习视频分享:css视频教程

    以上就是css怎么设置背景图片透明的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:css如何改变背景图片大小 下一篇:利用CSS怎么创建渐变色边框?5种方法分享
    线上培训班

    相关文章推荐

    • 手把手带你通过5个例子来熟悉CSS变量!• 巧用css filter的drop-shadow()函数创建线条光影效果• css怎么实现三角形• css的盒模型有几种• css中字间距怎么设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网