Question

在我的页面上：

<TouchableOpacity> 
 <Image style={{ height: 50, width: 50 }} 
   source= {require('../../res/images/bell.png')} /> 
</TouchableOpacity>

和CSS：

<div id="cont" class="container-fluid">
    <div class="row">
        <div id="sidebarcont" class="col-sm-3">
            <div id="sidebar"  class="position-fixed">
            </div>
        </div>
        <div id="main" class="col-sm-9">
            <div id="first_row">   
            </div>
            <div id="second_row">
            </div>
            <div id="first_row">
            </div>
            <div id="second_row">
            </div>
        </div>
    </div>
</div>

我希望将背景图像放在侧边栏的顶部，填满整个宽度（#sidebar { background-image: url('../Media/cos.png'),url('../Media/ant.jpg'); background-repeat: repeat, no-repeat; background-size:contain; background-position:top; height:auto; } #sidebarcont { width:100%; }）并固定。我已经实现了将侧边栏放在顶部，但是它的大小是：background-size: contain

Answer 1

尝试设置background-size: 100%，即100％的宽度和自动的高度。它将图像拉伸到与侧边栏一样宽，并保持宽高比。

.sidebar {
  border: 1px solid black;
  height: 400px;
  width: 200px;
  
  background-image: url('https://www.w3schools.com/csSref/w3css.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}

<div class="sidebar"></div>

有关详细说明，请参见here。

CSS中也存在语法错误：在background-repeat中省略逗号。

引导程序4列中的背景图像

1 个答案: