如何放置按钮的背景图片中间左?

这里是我的按钮:http://jsfiddle.net/cRqhT/120/

HTML:

<a id="button" href="http://example.com"</a>

CSS:

#button{ display: block; width: 121px; height: 40px; background: url(https://gator1174.hostgator.com/~mskparik/facebook/1.png) no-repeat top; } #button:hover { background: url(https://gator1174.hostgator.com/~mskparik/facebook/2.png) no-repeat bottom; }

这里的背景: 如何放置按钮的背景图片中间左?

我如何把我的按钮在背景中的左中?

--------------解决方案-------------

你缺少一个>从你的锚:

<a id="button" href="http://mysite.com"></a>

一个解决办法是把你的锚在与背景和绝对位置锚的容器:

<div>
<a ... ></a>
</div>

.div { position:relative; background:transparent url('myUrl.png') no-repeat; }
a { position:absolute; top:XXpx; left:0; }

其中,除法器具有相同的高度和宽度为背景图像,并且XXpx等于锚的高度从图像高度中减去,除以二。

例如的jsfiddle。

分类:HTML 时间:2012-01-24 人气:1
分享到:

相关文章

  • 样式化按钮的背景图像,按钮图标图像和文字使用CSS精灵 2013-06-02

    我想优雅地解决造型问题,一些按钮和图像. 我的目标是有如下所示的按钮: (哈克MSPAINT样机) 不过,我有一组标准我想满足: 我还需要能够具有的图标图像作为按钮存在单独的,没有文本(即按钮的背景是图标图像和按钮的宽度/高度=图标图像宽度/高度). 图标,按钮,只需要支持:hover了更改背景图标状态. 文本按钮需要支持渐变背景变化对:hover ,但图标本身不必改变. 我有两个图标,图像和垂直CSS精灵形象提供给我梯度图像. 目前,我只能想到用风格不同的集文本按钮和图标按钮只有做到这一点,大

  • 使用CSS设置flex MX按钮的背景颜色 2014-02-01

    使用CSS,如何设置一个Flex MX按钮的背景颜色? 我的按钮被声明为: <mx:Button label="My Button"/> 而CSS是: @namespace mx "library://ns.adobe.com/flex/mx"; mx|Button { color: #66ffff; backgroundColor: #333333; } backgroundColor似乎并不为MX按钮的背景颜色正确的CSS属性. 纵观Flex的API

  • 何时使用IMG与CSS背景图像? 2012-03-09

    在什么情况下是它使用HTML更合适的IMG标记来显示图像,而不是一个CSS background-image ,反之亦然? 因素可能包括可访问性,浏览器的支持,动态内容或任何种类的技术限制或可用性原则. --------------解决方案------------- IMG的正确使用 使用IMG如果你打算让人们打印页,你想要的形象被默认包含. -JayTee 使用IMG与alt文字)时,图像具有重要的语义含义,如警告图标. 这确保了图像的含义可以在所有的用户代理,包括屏幕阅读器进行通信. IMG

  • jQuery的/ CSS - 如何清除CSS背景设定在另一个​​文件中我不能编辑 2012-04-24

    我试图覆盖按钮的背景,那就是: background: url("path/to/image.jpg") no-repeat scroll left center transparent; 我想摆脱的形象,但我不能访问该文件,我需要通过CSS或jQuery来覆盖. 任何想法我怎么能做到这一点,因为一些容易像background: none不行,我不能使用jQuery删除全班同学,我不希望把透明的PNG 1x1px浪费HTTP请求. 图像已去......任何想法我能做些什么? 感谢帮助.

  • 残疾人专用提交按钮与背景图片 2012-05-16

    我有一个表单提交按钮,使用具有含'值'文本'漂亮'风格版本的背景图像. 我躲在使用HTML文本值: text-indent: -9000px; font-size: 0; 然而,随着图像关闭(可访问性测试)有明显显示任何按钮上的文字. 除去上述带来的价值文本后面,但是它覆盖在图像的顶部. 我怎么能对价值的文字顶部的背景图片? 通过第一个猜测是一些组合<button><span></span></button> --------------解决方案------

  • 对于jQuery UI的对话框按钮的背景图片 2012-06-04

    是否有可能给一个按钮的背景图像我真的有,我想用一个按钮,如果他们留在喜欢默认的按钮位置将是很好的图像. 现在我只是让他们的对话框内,但其余内容是动态的,我不想让他们消失滚动条出现时 编辑:好了,所以我想通了,如何让它的背景图像,但然后我不能看到整个图像 $("#statusbox").dialog({ autoOpen: false, bgiframe: true, modal: true, width: 'auto', height:'auto', position: 'top',

  • 避免在按钮CSS层叠? 2012-06-13

    我有我的地方定义一些CSS象下面这样一个div(ID ="TabContainer的"): #tabContainer .ui-state-active { background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; } 在这个格,我有一些按钮.问题是,当我点击这些按钮之一,在CSS的TabContainer的定义的背景也显示在我的按钮的背景. 我怎样才能避免这种情况? 看来,div的儿童其父母的背

  • 参考PrimeFaces图像资源作为CSS背景图片网址 2012-08-24

    有点新的JSF和PrimeFaces我在这里,试图加载的资源(图像是具体的),并把它作为一个按钮的背景,就像这样: .greenButton { background: url(#{resource['images:ui-bg_gloss-wave_50_6eac2c_500x100.png']}); } 和<h:outputStyleSheet library="css" name="customStyles.css" />但它总是解析为: .gree

  • 预加载CSS背景图片 2012-10-09

    我有部署点击一个按钮,一个隐藏的联系表格. 它的字段设置为CSS背景图像,他们总是显得有点晚于已切换的股利. 我用这个片段中<head>部分,但没有运气(之后我清空缓存): <script type="text/javascript"> $(document).ready(function() { pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="<?php b

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.604 (s). 10 q(s)