聪明的Css技巧来显示图片

Question

你想要一些

的照片

1. 不容易复制
2. 可以通过将鼠标悬停在其上来改变
3. （和踢球者）仅使用css

你是怎么做到的？

Answer 1

有人会说这不可能。不是我。

HTML：

<div><span>Some useless text</span></div>

这就是你所需要的，美丽就在css中。

CSS：

div {
    clear: both;
    height: 500px;
    width: 800px;
    background-image: url('http://media.npr.org/assets/img/2013/01/29/cat-bird_wide-85ce4b8383b9440d3ff03413cdd913513e9737bf-s6-c30.jpg');
}

span {
    display: none;
}

现在我们有了图片，但我们还没有完成！

css finisher：

div:hover {
    background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/101418789-cat-panleukopenia-fact-sheet-632x475.jpg');
}

唯一真正的问题是高度，但可以通过将其设置为大于图片，背景透明，无背景重复来修复，您可以浮动它或清除侧面以满足您的需要。

Answer 2

一些想法。

1. 将伪元素与content:url(myimage.png)一起使用，更改值 徘徊它。它可以是文本中的空inline-block。无法选择伪。
2. 使用透明图像并将实际图像设置为background，然后更改 悬停的背景。通过拖放或右键单击，可以复制透明图像 不要忘记大小。或图像标签或图像标签 ＆安培;背景

图片网址无论如何都会在CSS文件中。