html - 两侧背景淡出(纯html)

Question

我有一个红色背景颜色的名字和姓氏，我希望红色在左侧和右侧淡出(大约在红色背景的 2/10 和 8/10)，使用 css。

欢迎任何帮助

body {
margin: 0;
padding: 0;
color: white;
text-align: center;
background-image: 
url(https://www.abercrombiekent.com/-/media/ak/media-for-prod/journeys/lsgj/asia-classic-japan-mt-fuji-cherry-blossom-mh.jpg?h=500&w=1224&la=en&hash=FE20C6C6D4D6D693DD79CAA29352D7F9825D6804)
}

.name{
background-color: rgba(255,0,0,0.8);
}

.img{
background-size: cover;
background-position: center;
width: 100%;
background-attachment: fixed;
align-items: center;
}

h1{
margin-top: -10px;
font-size: 80px;
letter-spacing: 8px;
font-family: Arial;
}

h2{
margin-top: -60px;
padding-bottom: 20px;
font-size: 31px;
letter-spacing: 5px;
font-family: Arial;
}

<div class= "img">
<div class= "name">
<h1>/////</h1>
<h2>///////////</h2>
</div></div>

Answer 1

可以使用background: linear-gradient设置背景渐变。您可以使用百分比表示位置和 rgba 颜色(允许您修改不透明度)来设置任意数量的停止点。

我把你的背景颜色改成了这个渐变:

background: linear-gradient(to right, rgba(255, 0, 0, 0) 10%, rgba(255, 0, 0, 1) 20%, rgba(255, 0, 0, 1) 80%, rgba(255, 0, 0, 0) 90%);

body {
  margin: 0;
  padding: 0;
  color: white;
  text-align: center;
  background-image: url(https://www.abercrombiekent.com/-/media/ak/media-for-prod/journeys/lsgj/asia-classic-japan-mt-fuji-cherry-blossom-mh.jpg?h=500&w=1224&la=en&hash=FE20C6C6D4D6D693DD79CAA29352D7F9825D6804)
}

.name {
  background: linear-gradient(to right, rgba(255, 0, 0, 0) 10%, rgba(255, 0, 0, 1) 20%, rgba(255, 0, 0, 1) 80%, rgba(255, 0, 0, 0) 90%);
}

.img {
  background-size: cover;
  background-position: center;
  width: 100%;
  background-attachment: fixed;
  align-items: center;
}

h1 {
  margin-top: -10px;
  font-size: 80px;
  letter-spacing: 8px;
  font-family: Arial;
}

h2 {
  margin-top: -60px;
  padding-bottom: 20px;
  font-size: 31px;
  letter-spacing: 5px;
  font-family: Arial;
}

<div class="img">
  <div class="name">
    <h1>/////</h1>
    <h2>///////////</h2>
  </div>
</div>