网页背景图片加遮罩层详解

最新推荐文章于 2021-05-31 08:44:37 发布

Braylon1002

最新推荐文章于 2021-05-31 08:44:37 发布

阅读量3.9k

点赞数 2

分类专栏： web前端文章标签： web前端背景图片遮罩层网页背景 background

本文链接：https://blog.csdn.net/qq_40742298/article/details/95886497

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先加入背景图片

别的不说先上代码

<head>
<!--中间引用和配置掠过-->
<style>
        body {
            background-image: url("images/jumborton.jpg");
            background-size: contain;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;
        }
        .shade{
            position: absolute;
            background-color: #555555;
            height:100%;
            width: 100%;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div class="shade">

       <p>&nbsp;</p>
    </div>


</body>

将style标签放在head标签中
这里我直接给body加css样式，非常方便而且效果不错。

属性解释

background-image
这个不用多说了背景图片的url，写前端必会属性
background-size
也很简单，图片大小我用的是contain，把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
可能大家对后面几个有些疑问，我来借用一下官方的解释
1、-moz代表firefox浏览器私有属性
2、-ms代表ie浏览器私有属性
3、-webkit代表safari、chrome私有属性这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。

引用百度知道 https://zhidao.baidu.com/question/364311602.html

加入遮罩层

也就是我写的.shade的div层
其实很简单，但是我填一个坑
如果要用百分号标识width和height，注意最好使用position：absoluate

在这里插入图片描述

来自 www.w3school.com.cn

然后带有遮罩层的背景页面就完成了

Braylon1002

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页背景图片加遮罩层详解

首先加入背景图片别的不说先上代码<head><style> body { background-image: url("images/jumborton.jpg"); background-size: contain; -webkit-...
复制链接

扫一扫

专栏目录