如何将人体背景图像设置为50％？

Question

如何使人体图像只能看到一半？我也尝试过使用背景技术，但是我没有成功，或者我没有意识到自己是一个初学者。寻找几个小时的时间来回答问题，我不知道如何使图像只能在屏幕的一半处显示。

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>

Answer 1

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，但是您可以通过插入一个具有常规不透明度的伪元素（其后面元素的确切大小）来伪造它。

Answer 2

0
投票

这是我能够实现的示例代码。

如何将人体背景图像设置为50％？

问题描述投票：0回答：2

2个回答

最新问题

如何将人体背景图像设置为50％？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2