介绍 & lt; ! DOCTYPE html>
,& lt; html lang=癳n"比;
,& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title>登陆& lt;/title>
,,,& lt; style 类型=拔谋?css"比;
,,,,,,,身体{
,,,,,,,,,,,背景图片:url(图片/bird.jpg);
,,,,,,,,,,,平铺方式:,不再重演;
,,,,,,,,,,,background-size: 100%;
,,,,,,,}
,,,,,,,之前.login_box: {
,,,,,,,,,,,内容:““;
,,,,,,,,,,,/* -webkit-filter:,不透明度(50%);,,
,,,,,,,,,,,过滤器:,不透明度(50%);*/,,,,,,,,,,,背景图片:url(图片/love.jpg);
,,,,,,,,,,,不透明度:0.5;//透明度设置
,,,,,,,,,,,z - index: 1;
,,,,,,,,,,,background-size: 500 px 300 px;
,,,,,,,,,,,宽度:500 px,,
,,,,,,,,,,,身高:300 px;
,,,,,,,,,,,位置:绝对;
,,,,,,,,,,,//一定要设置位置:绝对,这样才能设置z - index,让背景处于内容的下一层
,,,,,,,,,,,:0 px;
,,,,,,,,,,,左:0 px;
,,,,,,,,,,,这个特性:40像素;
,,,,,,,}
,,,,,,,.login_box {
,,,,,,,,,,,位置:固定;
,,,,,,,,,,,左:50%;
,,,,,,,,,,,:200 px;
,,,,,,,,,,,宽度:500 px;
,,,,,,,,,,,身高:300 px;
,,,,,,,,,,,margin-left: -250 px;
,,,,,,,,,,,这个特性:40像素;
,,,,,,,,,,,不必:,10 px 10 px 5 px # 888;
,,,,,,,,,,,边界:1 px solid # 666;
,,,,,,,,,,,text-align:中心;
,,,,,,,}
,,,,,,,{形式
,,,,,,,,,,,显示:inline-block;
,,,,,,,,,,,margin-top: 100 px;
,,,,,,,}
,,,,,,,输入{
,,,,,,,,,,,显示:块;
,,,,,,,,,,,宽度:250 px;
,,,,,,,,,,,身高:30 px;
,,,,,,,,,,,背景颜色:,# 888;
,,,,,,,,,,,边界:1 px solid #费用;
,,,,,,,,,,,大纲:没有;
,,,,,,,,,,,这个特性:10 px;
,,,,,,,}
,,,,,,,输入(type=皊ubmit") {
,,,,,,,,,,,宽度:100 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关css怎么实现背景图片半透明内容不透明,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<>强效果展示
半透明
不透明
<强>常见的失败做法
最常见的做法事设置元素的透明度,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。
还有就是设置background: rgba(),这种方式只能设置背景颜色的透明度。
<强>正确姿势
我想到两个方法,第一个就是利用伪元素::以前,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现
