html - 如何将身体背景图像设置为 50%?
问题描述
我怎样才能让身体形象只看到一半?我也尝试过背景大小,但我没有成功,或者我没有意识到自己是初学者。寻找几个小时来回答这个问题,我不知道如何使图像只能看到屏幕的一半。
body {
background: url(bg.jpg) no-repeat center center fixed;
margin-top: -10px;
min-height: 100vh;
overflow-x: hidden;
}
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="vertical-nav bg-white" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">BAZA DE DATE</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">
<i class="fas fa-home mr-3 text-primary fa-fw"></i>
Acasa
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
</ul>
</div>
<div class="page-content p-5" id="content">
<h2 class="display-4 text-white">Bootstrap vertical nav</h2>
</div>
</body>
</html>
解决方案
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
没有 CSS 属性 background-opacity,但你可以通过插入一个具有常规不透明度的伪元素来伪造它,它后面的元素的确切大小。
推荐阅读
- reactjs - 如何在 react-testing-library 中获取具有“name”属性的元素
- vlc - 使用网络摄像头/hdmi-usb 加密狗时,帧率低(视频断断续续)、无声音、“图像中未找到 JPEG 数据”
- ios - 未安装私钥 Apple Distribution
- javascript - 在 AJAX 调用中从 (data) 中提取数组数据
- drupal - 是否有显示为 Drupal 核心发布的最新安全补丁的 RSS 提要
- iis - IIS 重写规则来编辑传出内容以代理 HTTP 图像文件?
- mongodb - 如何在mongodb的过滤器中使用自己的元素过滤文档
- vb.net - 如何在变量声明中使用 Type 类作为类型
- elixir - 是否应该将 :name 和/或 :app 添加到伞形应用程序的根 mix.exs 文件中的项目定义中?
- autohotkey - 仅当鼠标位于屏幕的某个坐标而不干扰我的键盘时,如何才能激活脚本?