CSS背景与一些边界

Question

我在为div元素添加背景方面遇到了麻烦。

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

JSfiddle

这不是太多，但我想要的是：

知道如何添加这个？

感谢。

编辑： 抱歉可怜的解释。我想要和需要的只是用css完成，所以背景中没有图像。可能吗？这只是宽度和高度的示例，所以我需要它才能响应，因为它将在网站背景中使用...

Answer 1

听起来你正在寻找的是背景图片。将图像保存到本地目录，然后执行类似这样的操作

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

Answer 2

使用SVG，嵌入时就像CSS一样工作，内联，没有＆＃34;图像＆＃34;加载，它可以缩放，是创建三角形等图案的绝佳方式。

以下是一个包​​含2个三角形的示例，您可以将其作为开头。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

HTML5 Canvas，虽然这需要SVG没有的脚本。

＆＃13;

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

要将此图像用作背景，请为所有div或bg-box添加css规则。

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

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