rgba()和opacity的比较

最新推荐文章于 2023-02-15 11:47:26 发布

ou~吼

最新推荐文章于 2023-02-15 11:47:26 发布

阅读量106

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/ttl1076005106/article/details/103872672

版权

首页rgba()和opacity都能实现透明效果，但是rgba()只作用于元素的颜色或其背景色，
而opacity作用于元素，以及元素内的所有内容的透明度

直接看代码和效果图

/opacity/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .box1{
      width: 360px;
      height: 360px;
      opacity: 0.6;
      overflow: hidden;/*防止外边距塌陷*/
    }
    .box2{
      width: 100px;
      height: 100px;
      margin: 100px;
      background: purple;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2">此时给box1设置opacity: 0.6</div>
</div>
</body>
</html>

在这里插入图片描述

/rgba()/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .box1{
      width: 360px;
      height: 360px;
      background: rgba(255, 0 , 0 , 0.6);
      /*opacity: 0.6;*/
      overflow: hidden;/*放在外边距塌陷*/
    }
    .box2{
      width: 100px;
      height: 100px;
      margin: 100px;
      font-size: 12px;
      background: purple;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2">此时取消box1设置opacity: 0.6;给box1设置background: rgba(255, 0 , 0 , 0.6);</div>
</div>
</body>
</html>

在这里插入图片描述

ou~吼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rgba()和opacity的比较

首页rgba()和opacity都能实现透明效果，但是rgba()只作用于元素的颜色或其背景色，而opacity作用于元素，以及元素内的所有内容的透明度直接看代码和效果图/opacity/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...
复制链接

扫一扫