有一些邊框的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背景

回答

相關問題