css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法

要设置 CSS 中的背景透明度，可以使用 rgba 格式的颜色值，其中 a 表示 alpha 值，即透明度，取值范围为 0（完全透明）到 1（完全不透明）。例如：

background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色为白色，透明度为 50% */

而要设置图片的透明度，则可以使用以下三种方法：

1. 使用 opacity 属性，该属性会对元素及其内容（包括图片）进行透明度设置，取值范围为 0（完全透明）到 1（完全不透明）。例如：

img {
  opacity: 0.5; /* 设置图片透明度为 50% */
}

2. 使用 CSS3 新增的 filter 属性中的 alpha() 函数，该函数可以对元素及其内容（包括图片）进行透明度设置，取值范围为 0（完全透明）到 1（完全不透明）。例如：

img {
  filter: alpha(opacity=50); /* 兼容 IE8 及以下浏览器 */
  opacity: 0.5; /* 设置图片透明度为 50% */
}

3. 使用 PNG 图片的透明度，即将图片保存为 PNG 格式，并在图片中设置透明度。例如：

img {
  background: url(transparent.png); /* 设置透明度为 50% 的 PNG 图片为背景 */
}

其中，transparent.png 是一张透明度为 50% 的 PNG 图片。