您可以在不移动文本的情况下移动带有 CSS 的背景吗?
Can you move a background with CSS without moving text?
我目前正在处理一个徽标在 Internet Explorer 中不起作用的网站:http://core2062.com/
该站点的创建者将文本设为超链接,然后应用背景图像在其后面添加徽标。在除 IE 之外的浏览器中,徽标显示在文本的左侧。这是我正在使用的 CSS:http://dev1.core2062.com/wp-content/themes/CORE-Website/style/ie.css
徽标的实际 HTML 是:
<a id="logo" href="http://core2062.com" title="Click here to go back to the main page.">CORE<br/>2062</a>
由于文本和背景都在一个超链接中,我无法只修改文本或只修改背景而不修改另一个。由于无法仅针对超链接中的文本,是否可以通过某种方式手动将背景向左移动,或者将文本向右移动?
我尝试将 margin-left 和 padding-left 设置为 0,但这将背景和文本都移到了左侧,这就是为什么我要移动一个而不是另一个。
我没有修改任何 HTML(br 不是我的)。它是大约 10 年前编码的。
通常情况下,这里的模式是在徽标 <a>
上使用 text-indent: -9999px
来隐藏文本(同时保留语义意义——例如,对于搜索引擎)。
text-indent
会将文本 -9999px
移到左侧(超出 <a>
的范围),但背景将保持原样。
要将背景放置在此之外,请使用 background-position
。
使用带有负数的background-position
,例如评论中尝试的-45px,可以将徽标从其正常位置推开。
我目前正在处理一个徽标在 Internet Explorer 中不起作用的网站:http://core2062.com/
该站点的创建者将文本设为超链接,然后应用背景图像在其后面添加徽标。在除 IE 之外的浏览器中,徽标显示在文本的左侧。这是我正在使用的 CSS:http://dev1.core2062.com/wp-content/themes/CORE-Website/style/ie.css
徽标的实际 HTML 是:
<a id="logo" href="http://core2062.com" title="Click here to go back to the main page.">CORE<br/>2062</a>
由于文本和背景都在一个超链接中,我无法只修改文本或只修改背景而不修改另一个。由于无法仅针对超链接中的文本,是否可以通过某种方式手动将背景向左移动,或者将文本向右移动?
我尝试将 margin-left 和 padding-left 设置为 0,但这将背景和文本都移到了左侧,这就是为什么我要移动一个而不是另一个。
我没有修改任何 HTML(br 不是我的)。它是大约 10 年前编码的。
通常情况下,这里的模式是在徽标 <a>
上使用 text-indent: -9999px
来隐藏文本(同时保留语义意义——例如,对于搜索引擎)。
text-indent
会将文本 -9999px
移到左侧(超出 <a>
的范围),但背景将保持原样。
要将背景放置在此之外,请使用 background-position
。
使用带有负数的background-position
,例如评论中尝试的-45px,可以将徽标从其正常位置推开。