具有旋转、重复和不透明度的CSS背景图像

织梦狗教程前端问题

2022-01-01

CSS background image w/ rotate, repeat and opacity(具有旋转、重复和不透明度的CSS背景图像)

本文介绍了具有旋转、重复和不透明度的CSS背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试用图像做一个漂亮的背景，但是我想要重复图像来填满屏幕，不透明度设置为0.5，并且它旋转了45度。我已经尝试了很多方法来完成这件事，但都没有成功。有谁有主意吗？

在此代码中，我对图像进行了旋转和不透明处理，但无法使背景重复工作。

.background {
  height: 500px;
  width: 500px;
  position: relative;
  display: inline-block;
  padding: 100px;
  border: black 3px solid;
}

.background::before {
  content: "";
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0.5;
  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
  background-size: contain;
  transform: rotate(45deg);
  background-repeat: repeat;
  opacity: 0.5;
}

<span class='background'>HElloWorld</span>

推荐答案

您可以这样做：

.background {
  height: 500px;
  width: 500px;
  position: relative;
  z-index:0;
  display: inline-block;
  overflow:hidden; /* hide the overflow here not on the pseudo element */
  padding: 100px;
  border: black 3px solid;
}

.background::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */
  width: 141%;
  height:141%;
  /**/
  /* to center*/
  left: 50%;
  top: 50%;
  /* */
  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
  background-size: 100px 100px; /* size of the image*/
  transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */
  opacity: 0.5;
}

<span class='background'>
    HElloWorld
  </span>

这篇关于具有旋转、重复和不透明度的CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

织梦狗教程

本文标题为：具有旋转、重复和不透明度的CSS背景图像

上一篇：如何在&lt；img&gt；标签中使用CSS背景附件？

下一篇：为什么HTML背景图像不能在VS代码的实时服务器中显示？

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX