Question

我有一个列（假设宽度为40px），我有一些行。行的高度取决于文本的长度（如果文本很长则会有一个断行，因此高度会增加）。

现在我想在文本旁边的每一行中显示一个图标，以向用户显示他已经在该选项卡中完成了某些内容。所以我试图通过仅使用css来解决这个问题。因此，如果用户完成选项卡，那么我将更改该行的CSS。但是，如果不重复图像，我无法在该行中添加图像。

我正在使用此css代码：

padding: 0 8px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
overflow: hidden;
zoom: 1;
text-align: left;
font-size: 13px;
font-family: "Trebuchet MS",Arial,Sans;
line-height: 24px;
color: black;
border-bottom: solid 1px #BBB;
background-color: white;
background-image: url('images/checked.gif');
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

有谁知道怎么做？

Answer 1

而不是

background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

这是不正确的，请使用

background-repeat: no-repeat;

Answer 2

body {
    background: url(images/image_name.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是一个很好的解决方案，可让您的图像覆盖Web应用的整个区域完美

Answer 3

试试这个

padding:8px;
overflow: hidden;
zoom: 1;
text-align: left;
font-size: 13px;
font-family: "Trebuchet MS",Arial,Sans;
line-height: 24px;
color: black;
border-bottom: solid 1px #BBB;
background:url('images/checked.gif') white no-repeat;

这是完整的CSS ..为什么你使用padding:0 8px，然后用填充覆盖它？这就是你需要的......

Answer 4

这就是你所需要的：

background-repeat: no-repeat;

css与背景图像，而不重复图像

4 个答案: