html - 缩小时渐变宽度增加？

Question

我创建了一个使用线性渐变的 div。当我缩小(和/或放大)我的渐变收缩和增长取决于我缩小或放大的程度，我设置一个特定的宽度来试图阻止它。它没有用。

body{
  background: linear-gradient(200deg,#aebcbf -10%,#6e7774 110%,#0a0809 1000%);
  background-repeat:no-repeat
}

img {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration:1s;
  animation-direction: reverse;
  animation-timing-function: ease-in;
  animation-play-state: playing;
  float: left;
  opacity:0.5;
  border-radius:90%;
}

h1{
  font-size:20px;
  font-family: monospace;
  font-variant-caps:titling-caps;
  text-align:center;
  text-decoration-style: wavy;
  text-shadow: 2px 2px #FFFFFF;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#css-gradient {
  background: linear-gradient(blue, white);
  width:47%;
  border-style:outset;
  background-repeat:no-repeat
}

<div id="css-gradient">
  <img src="http://i.imgur.com/gQioYac.png" draggable="false">
  <img src="http://i.imgur.com/gQioYac.png" draggable="false">
  <img src="http://i.imgur.com/gQioYac.png" draggable="false">
  <img src="http://i.imgur.com/gQioYac.png" draggable="false">
  <img src="http://i.imgur.com/gQioYac.png" draggable="false">
  <div style="clear: left;"></div>
  <input type=color style="width:15px;height:100px;position:absolute;left:635px;top:8px;height:125px">
  <h1 title="If successful this will be in a white box">Hover over me!</h1>
  <hr style="width:300px;position:relative;top:-5px;border-style:double">
</div>

这是一个 JSFiddle ( https://jsfiddle.net/ffksjqp2/1/ )

Answer 1

我不是很明白你的问题。你的意思是用你的浏览器放大/缩小吗？ 无论如何，你可以用你的 css-gradient 类试试这个:

#css-gradient {
      background: linear-gradient(blue, white);
      background-attachment: fixed;
      width:47%;
      border-style:outset;
      background-repeat:no-repeat
    }