jQuery .css 背景不重复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8339551/
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
jQuery .css Background no-repeat
提问by MJCoder
I'm trying to set the background of an element to no-repeat- I've tried the following way but it seems to do nothing, am I going wrong somewhere? It brings out the image on the alink which is fine. I'm hiding the text links using text-indentto get it off the page (hiding it) but hiding this also hides the background image. Is there a way of trying to hide the link and just display the bg image? Below is what i have done so far - I just need some guidance to overcome this problem - relatively new to jQuery.
我正在尝试将元素的背景设置为no-repeat- 我尝试了以下方法，但似乎什么也没做，我是不是哪里出错了？它带出了a链接上的图像，这很好。我隐藏了text-indent用于将其从页面上移除（隐藏它）的文本链接，但隐藏它也会隐藏背景图像。有没有办法尝试隐藏链接并只显示 bg 图像？以下是我到目前为止所做的 - 我只需要一些指导来克服这个问题 - 对 jQuery 来说相对较新。
<script type="text/javascript"> //Looking for every td a element and alerting it out on page (popup)
$('.AspNet-DataList td a').each(function (index) {
//alert(index + ': ' + $(this).text());
var submitEl = $(".AspNet-DataList td a")
//.parent('.AspNet-DataList td a')
.css('background', 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'backgroundRepeat:', 'no-repeat');
});
When I view it in firebug the td aelement this is what is coming from the jQuery css. Even setting the background to no-repeatfrom here doesnt work and in the main css file I have tried adding a height and width - doesn't seem to work. Confused now.
当我在萤火虫中查看它时，该td a元素来自 jQuery css。即使no-repeat从这里设置背景也不起作用，并且在主 css 文件中我尝试添加高度和宽度 - 似乎不起作用。现在很迷茫。
<a id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList_SideBarButton_5" href="javascript:__doPostBack('ctl00$ctl07$HealthAndSafetyRadarForm_Wizard$SideBarContainer$SideBarList$ctl05$SideBarButton','')" style="background: url("/assets/img/radarstep6dark.png") no-repeat scroll 0 0 transparent;">Review</a>
//main.css
.AspNet-DataList td a {
/*text-indent: -9999em;*/
/*display:block; */
background-repeat: no-repeat;
height: 25px;
width: 25px;
}
回答by Houdmont
.css({'background-image' : 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)',
'background-repeat': 'no-repeat'});
回答by Jérémy Dutheil
Why did you comment the display: block;css ? You need that to tell the browser your link has to be displayed as a block.
Also I'm not sure you can use jQuery cssproperties like you do ; did you try the syntax div.css( { propertie: value, propertie: value } );?
你为什么评论display: block;css？您需要告诉浏览器您的链接必须显示为块。另外，我不确定您是否可以css像您一样使用 jQuery属性；你试过语法div.css( { propertie: value, propertie: value } );吗？
回答by Rory McCrossan
Try this:
尝试这个：
.css({
'background-image': 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)',
'background-repeat' : 'no-repeat'
});
回答by Rameshwar Vyevhare
input[type="submit"] {background:url(mybutton.png);background-repeat:no-repeat;height: 29px;width: 44px; }
Try this it works for me
试试这个对我有用
