一、有点俗态的开场白
要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。
本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。
二、IE浏览器下的渐变背景
2024年10月21日
一、有点俗态的开场白
要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。
本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。
二、IE浏览器下的渐变背景
2024年10月21日
随着电商和交互的升级，越来越多白底图逐渐开始用起来了。而且伴随着Figma的兴起，很多功能其实都是基于HTML5技术的不断运用和增加用户体验。
# css3特性
pointer-events:none;然后我看了一下Chrome审查元素的表现如下：
2024年10月21日
假设我们想给一个容器设置一层白色背景和一道半透明白色边框
html代码：
<body>
<div class="box1"></div>
</body>2024年10月21日
近日有个网友问我，怎么样能实现div半透明 文字不透明的效果呢？几天前好像我写一个用css3来做的，但他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下，用浮动层可以做到啊，具体的请看下面的代码：
<title>背景半透明但文字不透明</title>
<head>
<style>
body{background: #40ed90;}
#container {
color: #154BA0;
background: #ff0000;
filter: Alpha(Opacity=10, Style=0);
opacity: 0.10;
position: absolute;
height: 200px;
width:500px;
z-index:20;}
#text {
position: absolute;
height: 200px;
width:500px;
text-align:center;
z-index:30;}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>2024年10月21日
本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改
2024年10月21日
在建网站的过程当中使用背景图片似乎是绕不过去的一个环节，背景图的使用能更好的衬托出想要表达的内容，也可以让局部细节达到最完美的状态，合理使用背景能够让视觉感官有一个更加的舒服体验，专业设计师会让背景用的恰到好处，没有目的的使用往往会适得其反，不仅达不到想要表现的效果，反而还会喧宾夺主影响主体内容的表现。
2024年10月21日
通过本文章，你可以掌握以下内容：
2024年10月21日
css背景可以是纯色，也可以是图片。
背景色
background-color 属性为元素设置背景色。
p{background-color: #ccc;}
在浏览器中显示：
设置p元素的背景颜色为灰色
注意：background-color 不能继承，其默认值是 transparent（透明的）。如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
2024年10月21日
北方的冬天最怕有风，空气虽然好了，但是异常的冷，吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题，看了几个网站发现很多网站的弹窗都是自定义的，而且还把弹窗周围的区域做成了半透明状，看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试，一来以后肯定会用上这个功能，二来熟悉一下最近掌握的CSS+HTML布局。
说干就干，小白打开webStrom做起了弹窗的布局。他首先用一个容器layer作为弹窗的容器，然后里面放了窗口容器（dialog），窗口容器里面还包含了三个子容器，分别是标题（layerTitle）、内容区域（layerContent）、按钮区域（layerBTContainer）。