纯css实现背景图片半透明,内容不透明
前言
最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。
效果展示
半透明
不透明
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确姿势
我想到两个方法,第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登陆</title><style type="text/css">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;}</style></head><body><div class="login_box"><form action=<?php echo $_SERVER['PHP_SELF'] ?> method="post"><input type="text" name="nickname"><span><?php echo $nameERR; ?></span><br><input type="password" name="password"><span><?php echo $passwordERR; ?></span><br><input type="submit" value="登陆"></form> </div></body></html>
还有一种方法与伪元素异曲同工,我们可以通过设置不通的div,里面的div放置内容,父级div设置背景,然后给它设置透明度,大概布局如下:
<div class="bg"><div class="content">一些内容</div>
</div>
这样也可以达到同样的效果
纯css实现背景图片半透明,内容不透明相关推荐
- php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
- css3实现背景图片半透明内容不透明的方法
css实现背景图片半透明内容不透明的方法 上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明 内容不透明 最常见 ...
- css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明 内容不透明 最常见的做法事设置元素的opacity,这种设置 ...
- Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
- css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法
CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉. 代码: Document .ban ...
- 纯CSS实现背景渐变、球和阶梯的跳动
纯CSS实现背景渐变.球和阶梯的跳动 作者:马光佳 撰写时间:2019.1.17 开发工具与关键技术:MicrossftVisualStudio.animation与@keyframes的配合使用 背 ...
- CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式 解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- 纯css实现给图片加标签
纯css实现给图片加标签 原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
最新文章
- linux proc/xx/maps文件分析
- The Innovation | Volume 3 Issue 1 正式出版
- Skyscraper
- 程序员在35-40岁之后真的就是死胡同吗?
- c程序语言习题解答对编程有帮助吗,给C语言编程初学者的10个学习建议,助你学习事半功倍,不要错过...
- 【opencv学习】【Canny边缘检测】
- 2005.2.21 至 2005.8.8
- “三峡水怪”的真面目竟是这个!水怪:我不要面子的吗?
- 系统学习NLP(八)--中文分词整理
- 使用Movavi Video Editor如何做局部放大的影片特效
- 基于ionic4、cordova搭建android开发环境
- leetcode探索动态规划(二)
- 会扫地炒菜,将来机器人当钟点工
- 汇编语言王爽老师第四版(寄存器解读与实验二)
- scratch节假日课程:春节舞狮
- npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock
- 快速简单的方法,彻底解决新浪微博自动关注营销号的问题
- java移位加密_凯撒加密解密(java字母移位)
- java微信公众号开发一:服务器信息配置
- 软件设计师的证书有多少含金量?
热门文章
- DS1302实时时钟芯片
- 中文版 Apple 官方 Swift 教程《The Swift Programming Language》
- 移动开发之百度地图导航及定位
- 中小型企业网络的组建
- 如何用计算机寒假计划表,2018寒假计划表怎么做
- 粗糙集 遗传matlab,一种基于遗传算法和粗糙集的属性约简方法及精神状态评估方法...
- Mac电脑M1 配置环境踩坑记录【iOS】
- java--字节码增强--1.2--ByteBuddy--使用
- 什么是视频互动直播,你会如何介绍
- 数据通信选修笔记(一)chapter12 数据通信的基本概念与信号