如何放置 CSS 模式而不是基于 php 的网站背景

Posted 2023-03-04

【中文标题】如何放置 CSS 模式而不是基于 php 的网站背景

【英文标题】：how to put CSS pattern insted of php-based website background [closed]

【发布时间】：2022-01-24 05:41:46

【问题描述】：

我想将此代码作为 php 模板的背景图案，但是当我将它包含到 style.css 时它不起作用 我想知道你是否在这方面帮助我

html,
body 
  height: 100% !important;


body 
  margin: 0 !important;
  background-color: rgb(30, 30, 30) !important;


.website-wrapper
  width: 100% !important;
  height: 100% !important;
  background: center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(40,40,40)' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E") !important;
  background-size: 56px !important;

<div class="website-wrapper"></div>

【参考方案1】：

你可以试试这个，background 到 background-image：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(40,40,40)' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E") !important;

参考：https://www.w3schools.com/cs-s-ref/pr_background-image.asp