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

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

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

效果展示

半透明

不透明

常见的失败做法

最常见的做法事设置元素的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设置背景，然后给它设置透明度，大概布局如下：

一些内容

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

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

css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
css3实现背景图片半透明内容不透明的方法
css实现背景图片半透明内容不透明的方法上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见 ...
html 图片按钮,css按钮背景图片如何实现？（代码实例）
css按钮背景图片如何实现?相信有很多刚刚接触css的朋友都会有这样的疑问.本章就给大家介绍css按钮背景图片如何实现.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 很多人提交表单 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
html插入背景图片和div,HTML直接插入图片和css使用背景图片区别
刚刚接触前端重构的小伙伴或许会遇到一个问题,网页中的图片是做背景(写在CSS中)好呢,还是写在HTML标签中好呢?其实呢不同的场景.不同的项目需求下,选择都会不一样.我们先来分析一下网友的一些结论,并 ...
html怎样调节背景透明度,css设置背景透明度的方法是什么
css设置背景透明度的方法是什么发布时间:2020-09-01 15:43:28 来源:亿速云阅读:83 作者:小新这篇文章将为大家详细讲解有关css设置背景透明度的方法是什么,小编觉得挺实用的 ...
html如何调图片透明度,css图片怎么设置透明度？
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,css中的透明度怎么设置呢?今天这篇文章就来给大家分享css中图片透明度的设置方法. 我们来看 ...
css自适应图片样式,css怎么让图片自适应？css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
html怎么把页面和图片居中,css怎么让图片居中？
在前端页面的开发中,图片的显示方法有两种,分别为:img标签显示图片,background属性设置为背景图片显示.那么我们如何使用css设置图片居中呢? css设置背景图片居中: 1.设置背景图片居中 ...

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

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

最新文章

热门文章