我怎么能在网站 header 到 HTML 和 CSS 的一侧变黑

Question

怎么可能一边黑一边box-shadow看起来像通过HTML和CSS的图像？？

先致谢与爱。

Answer 1

据我了解你的问题，你的意思是像下图，对吧？

为此编写代码，

HTML

<div class="hero">
  <div class="image">
    <div class="section">
    <h1>Pushpa - The Rise</h1>
    </div>
    <div class="section">
    </div>
  </div>
</div>

CSS

*{
  margin: 0;
}

.hero {
  display: flex;
  justify-content: center !important;
  align-items: center;
  background: #10151e;
}

.image{
  display: flex;
  margin: 0 5%;
  background: linear-gradient(to right, rgba(16, 21, 30, 1),rgba(16, 21, 30, 0.95), rgba(16, 21, 30, 0.25), rgba(16, 21, 30, 0.2)), url('https://www.sify.com/uploads/Pushpa_vd0m26dcijffe.jpg');
  height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.section{
  flex: 1;
}

.image h1{
  color:white;
  padding-top:5%;
  font-size: 30px;
}

如有任何问题欢迎随时询问:)

Answer 2

要实现此效果，请使用背景图片，z-index，位置属性

background-image: linear-gradient(90deg, black 45%, transparent 100%); 这使得图像一侧具有黑色效果和透明效果。

For Image

position: absolute; 即使 background-image 的宽度为 100%

For outerdiv

position: relative; 这样属性不会让图片超出outerdiv区域

For image

z-index: -1; 这会将图像向后推，并将背景拉到前面

div{
  width: 100%;
  height: 500px;
  background-image: linear-gradient(90deg, black 45%, transparent 100%);
   z-index: 10;
}

.outerdiv{
  position: relative;
}

h1{
  color: white;
  font-family: youtube sans, montserrat;
  font-weight: 500;
  margin: 0px 30px;
  padding-top: 30px;
}

img{
  position: absolute;
  width: 60%;
  height: 100%;
    float: right;
  z-index: -1;
  top:0;
  right: 0;
}

p{
  color: white;
  width: 40%;
  font-family: poppins;
  font-weight: 300;
  margin-left: 30px;
}

<div class="outerdiv">
<div>
  <h1>
    Pushpa: The Rise (Telugu)
  </h1>
  <p>Pushpa Raj (Allu Arjun) a coolie, volunteers to smuggle red sanders, a rare wood that only grows in Andhra, with the help of novel ideas to smuggle the red sanders. Pushpa quickly becomes leader of red sanders smuggling network. While Pushpa is at his prime, a ruthless police officer Bhanwar Singh Shekhawat (Fahadh Faasil) takes charge as SP and ridicules Pushpa for his lineage.
</p>
</div>
<img src="https://akm-img-a-in.tosshub.com/businesstoday/images/story/202112/pushpaa-sixteen_nine.jpeg?size=948:533">
</div>

我怎么能在网站 header 到 HTML 和 CSS 的一侧变黑

How Can i One side black in website header through HTML and CSS

html

css

frontend

要实现此效果，请使用背景图片，z-index，位置属性

我怎么能在网站 header 到 HTML 和 CSS 的一侧变黑

How Can i One side black in website header through HTML and CSS

html

css

frontend

要实现此效果，请使用背景图片，z-index，位置 属性

要实现此效果，请使用背景图片，z-index，位置属性