有一些边框的CSS背景

-2

我在为div元素添加背景时遇到了麻烦。有一些边框的CSS背景

<div class="bg-box"> 
    <p>Lorem ipsum dolorem</p> 
</div>

JSfiddle

这不是太多，但我想有是：

任何想法我如何添加呢？

谢谢。编辑：对不起，解释不好。我想和需要的是这只能用CSS来完成，所以在后台没有图像。可能吗？这只是宽度和高度的一个例子，所以我需要它的响应能力，因为它将用于网站背景...

来源

2016-03-05 Morpheus

[**检查本网站**]（http://qrohlf.com/trianglify/） –

和 “* *的烦恼”，你有什么，到底是什么？你卡在哪里？你不明白什么？这是一个图像，还是它的CSS渐变？什么帮助，确切地说，你需要什么？ –

[**简易版本的同一网站**]（http://qrohlf.com/trianglify-generator/） –

使用SVG，嵌入时它像CSS一样工作，内联并且没有“图像”加载，它缩放并且是创建三角形等图案的绝佳方式。

下面是一个包含2个三角形的示例，您可以将其用作起点。

html, body { margin: 0; height: 100%; } 
 
.triangle { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #00cfaf; 
 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E %3Cpolygon points='200,10 250,190 160,210' style='fill:red;stroke-width:0' /%3E %3Cpolygon points='100,50 170,20 160,210' style='fill:yellow;stroke-width:0' /%3E %3C/svg%3E"); 
 
    background-repeat: no-repeat; 
 
}

<div class="triangle"> 
 
</div>

HTML5画布，虽然这需要脚本SVG没有。

function init() 
 
{ 
 
    \t var canvas = document.getElementById("canvas"); 
 
\t if(canvas.getContext) 
 
\t { 
 
    \t \t var ctx = canvas.getContext("2d"); 
 
\t \t ctx.fillStyle="#0FF"; 
 
\t \t ctx.beginPath(); \t \t 
 
\t \t ctx.moveTo(10,10); 
 
\t \t ctx.lineTo(150,10); 
 
\t \t ctx.lineTo(200,110); 
 
\t \t ctx.closePath(); 
 
\t \t ctx.fill(); 
 
     
 
\t \t ctx.fillStyle="#FF0"; 
 
\t \t ctx.beginPath(); \t \t 
 
\t \t ctx.moveTo(50,50); 
 
\t \t ctx.lineTo(10,100); 
 
\t \t ctx.lineTo(80,110); 
 
\t \t ctx.closePath(); 
 
\t \t ctx.fill(); 
 
\t } 
 
} 
 
    
 
onload=init;

html, body { margin: 0; height: 100%; } 
 

 
.triangle { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #00cfaf; 
 
}

<div class="triangle"> 
 
    <canvas id="canvas"></canvas> 
 
</div>

来源

2016-03-05 09:22:52 LGSon

不错。谢谢。我会用这个，希望能够实现我所需要的。 – Morpheus

听起来像你要找的是背景图片。将图像保存到本地目录，然后做这样的事情

div { 
    background-image: url("image.jpg"); 
}

来源

2016-03-05 00:55:15 user5680735

请检查我的编辑。谢谢。 – Morpheus

道歉我不认为这可能与纯css – user5680735

作为后台添加一个CSS规则要么所有div或您的BG-盒使用此图像。

.bg-box { 
    background-image: url("imageFile.jpg"); 
    width:400px; 
    height:400px; 
}

这会让你的照片成为div的背景。

来源

2016-03-05 02:56:51

请检查我的编辑。谢谢。 – Morpheus

我没有看到您的编辑。我会留意一下。 –

有一些边框的CSS背景

回答

相关问题