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

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,然后用填充覆盖它？这就是你需要的......