图像背景可以从CSS样式派生吗?

时间:2014-03-18 07:12:40

标签: html css

我是一张照片。我可以从CSS样式中获得它的背景吗?

以下是图片。我想在我的div中有类似的背景。

PS:我可以将它用作背景图像,但我不想这样做。所以,请不要建议这个解决方案。

enter image description here

3 个答案:

答案 0 :(得分:1)

最简单的方法是使用渐变。

background:-webkit-linear-gradient(left, #743D90, #954792); /*for chrome&safari*/
background:-moz-linear-gradient(left, #743D90, #954792);    /*for firefox*/
background:-o-linear-gradient(left, #743D90, #954792);      /*for opera*/
background:-ms-linear-gradient(left, #743D90, #954792);     /*for IE*/
background:linear-gradient(left, #743D90, #954792);         /*standard*/

使用图像的颜色制作渐变。 CSS有很多行,所以它几乎适用于所有浏览器。

实施例: http://jsfiddle.net/6uMzc/4/

希望这对你有用。

答案 1 :(得分:0)

如果我理解正确,您希望使用css创建类似于该图像的背景。你有几个选择这样做。对于初学者,您可以使用此Gradient Generator来创建渐变。它们相对简单,我确信你可以找出核心概念,生成器主要是因为必须添加不同的css前缀以实现兼容性。

你说不要考虑这些界限,但我认为我应该指出你CSS triangle generator,因为你需要它。你的图像的下半部分以一定角度切断,最好的方法是(恕我直言)创建一个白色三角形并将其放在上面。

如果您需要任何帮助来应用这些概念,请随时提问。

更新:请参阅:http://jsfiddle.net/6uMzc/6/

您需要两个单独的div来创建此效果。一个div是渐变,另一个是移除下角的三角形。我将解释css的不同部分:

background属性都定义了不同浏览器的渐变。

position:relative;

position:absolute;
left:0;
bottom:0;

这些行正在设置div。这可能会变得非常复杂,但对于Web开发人员来说它非常有用,所以您应该做进一步的研究。我实际上认为w3schools page对此非常好。具有相对,固定和绝对位置的元素可以通过left,right,bottom和top属性进行修改,这些属性可以在不同方向上移动它们。相对定位的元素相对于它们的正常位置移动。"具有绝对定位的元素相对于具有相对或绝对定位的下一个包含元素或主体移动。由于包含div位于相对位置,因此position:absolute使三角形相对于渐变移动。左:0和底:0将元素放在左下角。

border-width: 50px 0 0 500px;

更改第一个数字以更改高度,更改最后一个更改宽度。 500px是包含div的宽度,因此它覆盖了包含div的整个底部。

答案 2 :(得分:0)

绝对可以做到。

将图像标记包装在div中。

<div class="bg">
     <img src="xxx.jpg" alt="image">
</div>

注意图像必须具有透明背景(这应该通过像photoshop这样的图像编辑工具确保)

现在使用背景渐变和大小设置div的样式,如下所示。

.bg{
    height:100px;
    width:200px;
    background:-webkit-linear-gradient(left, red, green);
    background:-moz-linear-gradient(left, red, green);
    background:-o-linear-gradient(left, red, green);
    background:-ms-linear-gradient(left, red, green);
    background:linear-gradient(left, red, green);
   }