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%);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

背景逐渐淡出（纯HTML）

1 个答案: