CSS 带有背景图像的css而不重复图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8039094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css with background image without repeating the image
提问by mkn
I have a column (lets assume the width is 40px) and there I have some rows. The height of the rows depends on the length of text (if the text is long then there is a break line and therefore the height increases).
我有一列（假设宽度为 40 像素），并且有一些行。行的高度取决于文本的长度（如果文本很长，则有一个分隔线，因此高度会增加）。
Now I want to display an icon in each row next to the text to show the user for example that he has already completed something in that tab. So I was trying to solve this by using only css. So if the user completes a tab then I change the css of that row. However, I'm not able to add to that row an image without that the image is being repeated.
现在我想在文本旁边的每一行中显示一个图标，以向用户显示例如他已经完成了该选项卡中的某些内容。所以我试图通过只使用 css 来解决这个问题。因此，如果用户完成一个选项卡，那么我会更改该行的 css。但是，如果不重复该图像，我将无法向该行添加图像。
I'm using this css code:
我正在使用这个 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;
Does anyone know how to do that?
有谁知道这是怎么做到的吗？
回答by MOleYArd
Instead of
代替
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
which is not correct, use
这是不正确的，使用
background-repeat: no-repeat;
回答by laffan
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;
}
Here is a good solution to get your image to cover the full area of the web app perfectly
这是一个很好的解决方案，可以让您的图像完美地覆盖 Web 应用程序的整个区域
回答by Chuck Norris
Try this
尝试这个
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;
This is full css.. Why you use padding:0 8px, then override it with paddings? This is what you need...
这是完整的 css .. 为什么你使用padding:0 8px，然后用填充覆盖它？这就是你需要的...
回答by DanielB
This is all you need:
这就是你所需要的：
background-repeat: no-repeat;
