有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …我正在玩CSS渐变和位置,我有点设法做我想要的但幸运的猜测,但我想了解这实际上是如何工作的.
例如,这里是法国国旗(merci):
.serge_testDraw {
width: 10rem;
height: 10rem;
border: 0.2rem solid black;
background-image:
linear-gradient(to right, blue 0%, blue 100%)
, linear-gradient(to right, white 0%, white 100%)
, linear-gradient(to right, red 0%, red 100%)
;
background-size: calc(100% / 3) 100%;
background-repeat: no-repeat;
background-position: 0%, 50%, 100%;
}
为什么背景位置是0%,50%,100%而不是0,33.33%(三分之一),66.66%(三分之二)？
另外,我对如何定位尺寸为100%的背景毫无头绪.