定位背景重复 属性
Positioning the background-repeat Property
我有这个下拉按钮,它的样式使用 css:
.styled-select {
background: url(resources/img/selector.png) no-repeat right;
background-color: white;
width: 305px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
结果如图:
如您所见,使用 no-repeat right
使 selector.png
到达右端。我想知道是否有任何解决方案可以定位该箭头以便将其向左移动一点,如图所示:
尝试像这样更改 background-position
属性 value
:
background: url(resources/img/selector.png) no-repeat top 96%;
你必须这样使用正确的属性
.styled-select {
background: url(resources/img/selector.png) no-repeat right;
background-color: white;
width: 305px;
height: 42px;
position: relative;
padding:10px;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
我有这个下拉按钮,它的样式使用 css:
.styled-select {
background: url(resources/img/selector.png) no-repeat right;
background-color: white;
width: 305px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
结果如图:
如您所见,使用 no-repeat right
使 selector.png
到达右端。我想知道是否有任何解决方案可以定位该箭头以便将其向左移动一点,如图所示:
尝试像这样更改 background-position
属性 value
:
background: url(resources/img/selector.png) no-repeat top 96%;
你必须这样使用正确的属性
.styled-select {
background: url(resources/img/selector.png) no-repeat right;
background-color: white;
width: 305px;
height: 42px;
position: relative;
padding:10px;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
}