CSS, можно ли достичь этого без изображения?

Question

Я делаю сайт, и на большинстве веб-сайтов у него есть большое изображение с массивным текстом в нем, в котором говорится «Добро пожаловать» или что-то, что я воспроизвел то же самое, но мне было интересно, является ли изображение на фотографии за OptimisePC возможным для достижения простым CSS, поэтому нет изображения, это по соображениям производительности, потому что людям приходится загружать изображение, чтобы увидеть его, что требует времени.

Answer 1

image to css

Используя этот сайт, вы можете легко изменить изображение в CSS + !!

<style> 
.pixels{ 
    border-radius: 0; 
    display: inline-block; 
    width: 1px; 
    height: 1px; 
    box-shadow: bla~~ 
} 
</style> 
<div class="pixels"></div> 

Answer 2

В этом случае с помощью SVG может быть больше места эффективным (а также весы для любого разрешения)

Чтобы использовать его в «чистом CSS», вы можете встроить в SVG:

.selector { background: url('data:image/svg+xml;base64, ... svg code goes here ...'); } 

Лично я использую SCSS и рамки компаса, чтобы сделать это легко:

.selector { background: inline-image("path/to/file.svg"); } 

недостаток заключается в том, что вы должны заботиться не встраивать его несколько раз (или скопировать код), если вам нужно сделать, объединить соответствующие классы вместо:

.selector1, .selector2 { background: url('data:image/svg+xml;base64, ... svg code goes here ...'); } 

Answer 3

SVG

Вот решение SVG.
Установив ширину на 100%, элемент svg имеет шкалы со страницей в горизонтальном/х направлении.
Другими словами, этот фон является отзывчивым.

Добавлено меню для развлечения.

body { 
 
    margin: 0; 
 
} 
 
.content { 
 
    width: 100%; 
 
} 
 
/* SVG background */ 
 

 
.svg-background { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.svg-background polygon:nth-child(1) { 
 
    fill: #005A50; 
 
    stroke: #005A50; 
 
    stroke-width: 0.1; 
 
} 
 
.svg-background polygon:nth-child(2) { 
 
    fill: #007367; 
 
} 
 
.svg-background polygon:nth-child(3) { 
 
    fill: #1C9F91; 
 
    stroke: #1C9F91; 
 
    stroke-width: 0.1; 
 
} 
 
.svg-background polygon:nth-child(4) { 
 
    fill: #3DAEA2; 
 
} 
 
/* NAVBAR Many for making it look better :D*/ 
 

 
.navigation { 
 
    background-color: #222; 
 
} 
 
.menu-bar { 
 
    display: block; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 50px; 
 
} 
 
.menu-bar li { 
 
    display: inline-block; 
 
    color: white; 
 
    font-size: 20px; 
 
    //dding: 15px; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    line-height: 2em; 
 
    height: 100%; 
 
} 
 
.menu-bar li:hover { 
 
    background-color: #72B1D7; 
 
}

<nav class="navigation"> 
 
    <ul class="menu-bar"> 
 
    <li>OptimisePCs</li> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Services</li> 
 
    </ul> 
 
</nav> 
 
<div class="content"> 
 
    <svg class="svg-background" viewBox="0 0 100 100"> 
 
    <polygon points="0,0 10,0 0,20" /> 
 
    <polygon points="10,0 0,20 0,100 50,100" /> 
 
    <polygon points="10,0 50,100 70,100 80,0" /> 
 
    <polygon points="80,0 70,100 100,100 100,0" /> 
 
    </svg> 
 
</div>

Answer 4

Похоже, что вы хотите, это фон.

Вы можете достичь этого с помощью нескольких фонов и CSS linear-gradient значений под разными углами. Вы можете использовать остановки цвета, которые идут от твердого до прозрачного в том же месте, чтобы получить жесткие края.

Вот пример:

header{ 
 
    width: 100%; 
 
    height: 200px; 
 
    background: linear-gradient(60deg, #227766 25%, rgba(0,0,0,0) 25%), 
 
       linear-gradient(350deg, #40D2B3 20%, rgba(0,0,0,0) 20%), 
 
       linear-gradient(125deg, rgba(0,0,0,0) 70%, #39C1A5 70%), 
 
       linear-gradient(125deg, #2D9D87 45%, rgba(0,0,0,0) 45%), 
 
       linear-gradient(125deg, #35BEA2 70%, rgba(0,0,0,0) 70%); 
 
}

<header></header>

В качестве дополнительного бонуса, это отзывчивое из коробки. Он будет масштабироваться с размером контейнера.

Кроме того, вы должны установить твердотельный background-color, который станет резервным для более старых браузеров, которым не хватает поддержки для градиентов.