html 修改背景透明度,html – 用css更改背景图像的不透明度

您可以在Photoshop或GIMP等程序中更改不透明度.

或者你可以用css中的不透明度来做到这一点.但是你可能不希望这样,因为你的.intro中会有一些内容,然后它也会受到影响.

所以我建议遵循解决方案

.intro {

position: relative;

z-index: 0;

display: table;

width: 100%;

height: auto;

padding: 100px 0;

text-align: center;

color: black;

background-color: transparent;

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

-o-background-size: cover;

}

.intro:after {

content : "";

display: block;

position: absolute;

top: 0;

left: 0;

background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg');

background-size: cover;

width: 100%;

height: 100%;

opacity : 0.2;

z-index: -1;

}

基本上你添加:在作为背景图像的元素之后,你将它定位为绝对(你的.intro将需要位置:相对;)然后你设置z-index和不透明度.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您演示一个CSS3布局,并展示其中的2D功能。首先,我将使用flexbox布局来创建一个简单的页面布局。这个布局将包含一个标题,一个图像和一些文本。 HTML代码: ``` <div class="container"> <h1>Welcome to my website</h1> <div class="image-container"> <img src="image.jpg" alt="My Image"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra erat vel nulla maximus, eget scelerisque sapien mollis. Sed rutrum, felis in luctus fringilla, sapien ipsum auctor nulla, vel auctor urna turpis et arcu.</p> </div> ``` 现在,我将展示如何使用CSS来添加2D功能。首先,我将使用transform属性来对图像进行旋转和缩放。我还将使用opacity属性来更改图像的透明度CSS代码: ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .image-container { margin-top: 20px; transform: rotate(10deg) scale(1.2); opacity: 0.8; } img { max-width: 100%; height: auto; } ``` 在这个CSS代码中,我使用了transform属性来对图像进行旋转和缩放。我使用rotate(10deg)来将图像旋转10度,并使用scale(1.2)来将图像放大20%。我还使用了opacity属性来将图像的透明度设置为0.8,使其略微透明。 除此之外,我还可以使用transform属性来进行倾斜和翻译。例如,如果我想将标题倾斜20度,可以使用以下代码: ``` h1 { transform: skewY(-20deg); } ``` 如果我想将整个容器向右移动50像素,可以使用以下代码: ``` .container { transform: translateX(50px); } ``` 这些都是2D功能的示例,可以使用CSS3实现。希望这个示例可以帮助您更好地了解如何使用CSS3进行布局和2D转换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值