CSS设置 background-image透明度小技巧

在做数据总览得时候看到网上示例在div容器里加背景图还能，感觉大气又不单调，就想给自己得项目也尝试下，先来看看我想达到的样子（网上看到的）：

网图不清楚没办法，但是就是这种类似水印得效果。具体怎么实现呢，一开始就会认为使用 background-image就可以了，背景图片是能上来，但是无法设置透明度。

有关background得设置看着两个：

博客园的：

https://blog.csdn.net/gf771115/article/details/79754431

w3cschool的：

http://caibaojian.com/w3c/css/pr_background.html

经过我一顿查找，发现用linear-gradient可以实现，具体怎么用请看连接：https://www.cnblogs.com/dongzhi1111/p/12032119.html

我写的CSS样式如下：

#bgDiv_bgi1{background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url('/形象1.png') no-repeat 250px 40px/ 150px 150px;
}
#bgDiv_bgi2{background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url('/形象7.png') no-repeat 250px 40px/ 150px 150px;
}
#bgDiv_bgi3{background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url('/形象2.png') no-repeat 250px 40px/ 150px 150px;
}
#bgDiv_bgi4{background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url('/形象11.png') no-repeat 250px 40px/ 150px 150px;
}

最终效果：

完美解决我的这个需求。

由于本人对CSS设置这里不太熟悉，所以特来总结下，也欢迎大佬留言交流

CSS设置 background-image透明度小技巧相关推荐

使命召唤ol同步显示服务器,使命召唤OL—关于画面设置的几个小技巧
原标题:使命召唤OL-关于画面设置的几个小技巧众所周知<使命召唤OL>是一款真3D-FPS射击对抗类游戏.这款游戏的最低配合虽说仅要求内存1G以上,显存256MB.但你不会设置上的优化, ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
前端：CSS/15/全局CSS设置,常用的兼容性调试技巧,CSSHACK
全局CSS设置 1,清除所有的标记的内外边距 body,ul,li,a,img,p,input{margin:0;padding:0;} 2,去除项目符号或编号前面的符号 ul,ol,li{list- ...
前端背景图放置_web前端入门到实战：css 中的背景图片小技巧和存在的坑
body 的背景图设置第一种 :这种情况下背景图片可以缩放但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
Eclipse 项目导航字体设置左侧树字体小技巧
在解压的文件下 E:\eclipse\plugins\org.eclipse.ui.themes_1.2.0.v20170517-0622\css\dark 找到 e4-dark_basestyle ...
CSS设置元素的透明度(不透明度)
CSS3 opacity 属性作用: 设置元素的透明度语法: 1. object.style.opacity=0.52. opacity: value|inherit; 参数: value: 指定 ...
css background 一半_CSS小技巧
点击上方蓝字关注我们左右布局将内部的子元素加浮动,父元素清除浮动即可. 代码: DOCTYPE html><html><head><title>tes ...
看了一些东西，发现一些用css实现一些东西的小技巧就记录下来
1.用border-style的double属性实现一个三等分的小图标代码: ...

CSS设置 background-image透明度小技巧

CSS设置 background-image透明度小技巧相关推荐

最新文章

热门文章