【问题标题】:How to flip background image using CSS?如何使用 CSS 翻转背景图像?
【发布时间】:2011-08-11 18:11:38
【问题描述】:

如何使用 CSS 翻转任何​​背景图像?有可能吗?

目前我在 css 中的 background-imageli 中使用此箭头图像

On :visited 我需要水平翻转这个箭头。我可以这样做来制作另一个箭头图像但是我只是想知道是否可以在 CSS 中为 :visited

翻转图像

【问题讨论】:

  • 好问题!这可以在很多不同的情况下派上用场。
  • @AshBrad - 感谢 cmets。是的,它在许多情况下都有用

标签: css mobile-webkit


【解决方案1】:

在看到 Alex 的回答中翻转的线索后,我发现只翻转背景而不是整个元素的方法。感谢亚历克斯的回答

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

在此处查看示例http://jsfiddle.net/qngrf/807/

【讨论】:

  • @Jitendra 请检查 Jsfiddle URL。我认为它与您在答案中发布的代码不同+它不起作用..
  • 您发布的jsfiddle代码正在将文本翻转到?是你想要的,还是只是背景图片?
  • 你的jsfiddle和代码不一样,可以更新一下吗?
  • @JitendraVyas 你好,从 2016 年开始!我正在考虑建议进行编辑以修复 jsfiddle URL,因为它仍然链接到与您在此处的答案中不同的代码 - 是否要编辑帖子或删除链接?谢谢:)
  • -webkit-transform:scaleX(-1); for chrome
【解决方案2】:

您可以同时垂直和水平翻转

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

并且使用 transition 属性,您可以获得很酷的翻转

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

实际上它翻转了整个元素,而不仅仅是background-image

片段

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}
#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}
<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

【讨论】:

  • “同时垂直和水平翻转”与将图像旋转 180 度的效果相同,效果很好,正是我想要的,
【解决方案3】:

你可以用 CSS 水平翻转它...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle.

如果你想垂直翻转...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Source.

【讨论】:

  • 如果我只考虑 Web-kit 浏览器,那么只有 -webkit-transform: scaleX(-1); 就足够了吗?
  • @Jitendra 应该是,加上非供应商前缀属性。
  • @alex - 其中一个问题。它也在翻转&lt;a&gt; 内的文本,我只想翻转背景图像。你给出的代码是翻转整个元素
  • @Jitendra 看起来你不能只翻转背景图像。但是,您可以将图标放在 span 中,然后翻转它。
  • @alex - 好的,如果我使用此代码 &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 它也会翻转文本,所以与您提供的代码相反的内容是取消翻转文本,这样我就可以为 li a span { } 编写取消翻转代码CSS
【解决方案4】:

根据 w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

Internet Explorer 10、Firefox 和 Opera 支持 transform 属性。 Internet Explorer 9 支持另一种选择,即 -ms-transform 属性(仅限 2D 转换)。 Safari 和 Chrome 支持另一种选择,即 -webkit-transform 属性(3D 和 2D 转换)。 Opera 仅支持 2D 变换。

这是一个 2D 转换,因此它应该可以在 Chrome、Firefox、Opera、Safari 和 IE9+ 上使用供应商前缀。

使用的其他答案 :before 阻止它翻转内部内容。我在页脚上使用了它(从我的页眉垂直镜像图像):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

所以你最终会翻转元素,然后重新翻转它的所有子元素。也适用于嵌套元素。

【讨论】:

  • 感谢您的回答!这个对我来说效果最好,因为其他的要么翻转所有的孩子,要么需要更复杂的技巧来扭转翻转。
  • 如果这个答案确实翻转了目标元素内的所有内容,只需将其向下推到另一个元素中。换句话说,将你不想被翻转的内容包装在一个新的
    元素中。
【解决方案5】:

对于它的价值,对于基于 Gecko 的浏览器,由于由此产生的隐私泄露,您不能将这件事从 :visited 中排除。见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-06-03
    • 2011-06-20
    • 2023-04-09
    • 2021-09-28
    • 2023-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多