背景色和背景图片共存，背景图片覆盖色

文章参考

https://bbs.csdn.net/topics/390695803

问题描述

今天公司要做一个大屏展示，背景图片是背景色+透明背景图片合并而成，同事使用的是AI工具制作的图片，同事提供了一个透明的背景图片，然后让我显示最终的效果，按照
我的理解背景图片应该是与背景色不能共存的，查询了相关资料，当背景图片和背景色同时作用的时候，背景图片会覆盖背景色，没有覆盖到的就显示背景色，因此，可以模拟背景图片和背景色合并之后的效果

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.mybg{background-image: url("../images/screen/bg.png");background-color: #112035;}
</style>
<body class="mybg">
</body>
</html>

背景色和背景图片共存，背景图片覆盖色相关推荐

CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
CSS 背景色背景图片渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片基础语法 background-image: radial-gradient(shape extent at positionX posit ...
CSS 背景色背景图片渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
repeating-linear-gradient() 用来生成重复的线性渐变图案基础语法 background-image: repeating-linear-gradient(angleValu ...
背景颜色及背景图片相关的属性
1.background-color 设置背景颜色,取颜色值注意: 1.所有元素默认的背景颜色都是透明色,新建窗口的白色不是body的背景色,是浏览器渲染的 2. 背景颜色从边框位置开始绘制 3. ...
04-背景相关属性【背景颜色，背景图片，背景平铺，背景位置，img与背景图片的区别】
目录 1.背景颜色 2.背景图片 3.背景平铺 4.背景位置 5.background复合属性连写 6.背景图和img的区别 1.背景颜色属性名:backgrou-color 例如: back ...
android textview 背景图片,Android—TextView 背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
android textview获取背景颜色,Android TextView背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
css的背景颜色有哪些,css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
HTML的背景颜色和背景图片
1.设置背景颜色和图片注意:<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签. 语法:<img src="url"/> 或<img s ...
C# 如何给Word文档设置背景颜色和背景图片
C# 如何给Word文档设置背景颜色和背景图片 Word文档在创建时,背景颜色都是白色的,这样的背景色比较单一,看久了以后也非常容易视觉疲劳,给文档设置一个合适的背景颜色或者添加好看的背景图片,不仅可 ...

背景色和背景图片共存，背景图片覆盖色

文章参考

问题描述

案例

背景色和背景图片共存，背景图片覆盖色相关推荐

最新文章

热门文章