php背景图片透明度,css实现背景图片半透明内容不透明代码分享

╰+哭是因爲堅強的太久メ 2023-01-13 12:58 180阅读 0赞

本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。

最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。

效果展示

半透明

![0c1fa05c544e3d5379aa629a8830098f.png][]

不透明

![04ab38367c0d83951487567fdf6fe0b7.png][]

常见的失败做法

最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。

还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。

正确姿势

我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现

登陆

body\{

background-image:url(images/bird.jpg);

background-repeat: no-repeat;

background-size:100%;

\}

.login\_box::before\{

content:"";

/\*-webkit-filter: opacity(50%);

filter: opacity(50%); \*/

background-image:url(images/love.jpg);

opacity:0.5;//透明度设置

z-index:-1;

background-size:500px 300px;

width:500px;

height:300px;

position:absolute;

//一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层

top:0px;

left:0px;

border-radius:40px;

\}

.login\_box\{

position:fixed;

left:50%;

top:200px;

width:500px;

height:300px;

margin-left:-250px;

border-radius:40px;

box-shadow: 10px 10px 5px \#888;

border:1px solid \#666;

text-align:center;

\}

form\{

display:inline-block;

margin-top:100px;

\}

input\{

display:block;

width:250px;

height:30px;

background-color: \#888;

border:1px solid \#fee;

outline:none;

border-radius:10px;

\}

input\[type="submit"\]\{

width:100px;

height:30x;

margin-left: 70px;

background-color: \#ccc;

\}

span\{

color:red;

font-size:15px;

\}

method="post">

还有一种方法与伪元素异曲同工，我们可以通过设置不通的p，里面的p放置内容，父级p设置背景，然后给它设置透明度，大概布局如下：

一些内容

这样也可以达到同样的效果。

相关推荐：

[0c1fa05c544e3d5379aa629a8830098f.png]: /images/20221022/dd4a883bf9f84730b9670f0cffc74b35.png
[04ab38367c0d83951487567fdf6fe0b7.png]: /images/20221022/2ca586685de14510874a70ec6cc924e2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 css背景透明(css背景透明度怎么设置)

CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /\ 白色并且阿尔法通道是0.9\/

我会带着你远行/ 2023年09月26日 13:14/ 0 赞/ 24 阅读

相关 CSS-背景色 background 半透明

想要实现背景色的半透明效果可以是将 background 的属性值设置为 rgba() 语法： background: rgba(0, 0, 0, 0.5); 前

柔情只为你懂/ 2023年08月17日 17:29/ 0 赞/ 171 阅读

相关 css设置背景透明文字不透明，以及字体透明背景不透明的写法

实际展示效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

野性酷女/ 2023年07月13日 13:44/ 0 赞/ 45 阅读

相关 php背景图片透明度,css实现背景图片半透明内容不透明代码分享

本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。最近做一个登陆界面的，突然想使用这种背

╰+哭是因爲堅強的太久メ/ 2023年01月13日 12:58/ 0 赞/ 181 阅读

相关 CSS背景——背景颜色、背景图片、背景平铺、背景图像位置、背景图像固定、背景图像半透明

CSS背景 CSS可以通过背景属性给页面元素添加样式背景背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。背景颜色 backgro

短命女/ 2022年11月20日 08:17/ 0 赞/ 253 阅读

相关 PHP裁剪图片且保留背景透明

PHP裁剪图片用到的函数是： imagecopyresampled( resource $dst\_image , resource $src\_image , int $d

港控/mmm°/ 2022年10月23日 03:56/ 0 赞/ 181 阅读

相关利用css实现背景半透明，文字不透明。

利用css3新增的rgba属性，在新增filter属性兼容ie6、7、8浏览器 .div{ color:white; background-color:rgba(0,

港控/mmm°/ 2022年06月16日 06:24/ 0 赞/ 306 阅读

相关 CSS背景透明文字不透明或者子节点不透明

原文链接：[http://www.jufanshare.com/content/65.html][http_www.jufanshare.com_content_65.html

水深无声/ 2022年05月13日 13:38/ 0 赞/ 281 阅读

相关 CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果：背景图 + 伪类 + flite:blu

港控/mmm°/ 2022年04月15日 02:45/ 0 赞/ 401 阅读

相关 css背景透明

css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是background-color:rgba(0,0,

Dear 丶/ 2021年12月24日 07:05/ 0 赞/ 435 阅读