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

要设置 CSS 背景透明度，可以使用 `rgba()` 函数。其中，`rgba()` 函数中最后一个参数就是透明度值，取值范围是 0（完全透明）到 1（完全不透明）。例如：

background-color: rgba(255, 255, 255, 0.5); /* 白色半透明背景 */

而要设置 CSS 图片透明度，有三种方法：

1. 使用 `opacity` 属性。这个属性会同时影响元素的内容和背景，而不是只影响背景。例如：

   img {
     opacity: 0.5; /* 图片半透明 */
   }

2. 使用 `rgba()` 函数作为 `background-color` 的值。这种方法会只影响背景，而不影响图片本身。例如：

   div {
     background-color: rgba(255, 255, 255, 0.5); /* 背景白色半透明 */
     background-image: url('image.png'); /* 设置图片 */
   }

3. 使用 `::before` 或 `::after` 伪元素，并设置它们的 `opacity` 属性。这种方法也只会影响背景，而不影响图片本身。例如：

   div::before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: white; /* 白色背景 */
     opacity: 0.5; /* 半透明 */
   }
   
   div {
     position: relative;
     background-image: url('image.png'); /* 设置图片 */
   }