SVG

Question

我正在建立一个网站，在大多数网站上都有一个大图像，里面有大量的文字，上面写着欢迎或者我已经复制了同样的东西，但我想知道的是，OptimisePCs背后的照片中的图像可能与纯CSS因此没有图像，这是出于性能原因，因为人们必须下载图像才能看到它需要时间。

enter image description here

Answer 1

SVG

这是 svg 解决方案通过在svg元素上将宽度设置为100％，可以使页面在水平/ x方向上缩放换句话说，这种背景是响应性的。

添加了有趣的菜单。

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 2

看起来你想要的是一个背景。

您可以在不同角度使用多个背景和CSS linear-gradient值来实现此目的。你可以使用在同一个地方从实心到透明的色块来获得硬边缘。

以下是一个例子：

＆＃13;

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

＆＃13;

<header></header>

＆＃13;

作为一个额外的奖励，这是开箱即用的响应。它将随着容器的大小而扩展。

此外，您应该设置一个实体background-color，它将成为缺乏梯度支持的旧浏览器的后备。

Answer 3

在这种情况下，使用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 4

image to css

使用此网站，您可以轻松地将图像更改为css + !!

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

CSS，是否有可能在没有图像的情况下实现这一目标？

4 个答案:

SVG