縮小時漸變的寬度會增加嗎？

我已經創建了一個使用線性漸變的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/）

來源

2015-12-27 Mike

其他任何人有這個問題（縮小和對象的變化放大寬度），那麼你需要設置像素寬度，因爲當它被設置在％中，即使在縮小之後，也會佔用頁面的「XX％」。感謝您的幫助：> – Mike

我不是SUR我明白你的問題。你的意思是放大/縮小你的瀏覽器？反正你可以用你的CSS梯度類試試這個：

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

來源

2015-12-27 09:37:22

縮小時漸變的寬度會增加嗎？

回答

相關問題