Question

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

这是一个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
    }

缩小时渐变的宽度会增加吗？

1 个答案: