运用CSS伪类与属性,巧妙实现背景图片旋转效果

简介: 运用CSS伪类与属性,巧妙实现背景图片旋转效果
需求

开发的时候遇到需要将背景图片旋转-45度。这样的效果。

UI给的图片是正的。

方法

第一想到的是通过设置css3样式的transform: rotate(-45deg)。

问题

但是发现内容也跟着旋转了。

解决

所以把背景图放到伪类中进行旋转就可以完美解决这个问题了

.bgimg1{
  position: relative;
}
.bgimg1::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 0;
  width: 108px;
  height: 108px;
  display: block;
  background-size: 108px 108px;
  background-repeat: no-repeat;
  background-position: right top;
  background-image: url('./images/state1.png');
  transform: rotate(-45deg);
  opacity: 0.8;
}
扩展
  • transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
描述
none 定义不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。


  • CSS伪类是用来添加一些选择器的特殊效果。
伪类/伪元素 描述
:hover 选择鼠标指针浮动在其上的元素
:active 选择被用户激活的元素,例如点击按钮
:link 选择所有未被访问的链接
:visited 选择所有已被访问的链接
:first-child 选择其父元素的第一个子元素
:last-child 选择其父元素的最后一个子元素
:nth-child(n) 选择其父元素的第n个子元素
:nth-last-child(n) 选择其父元素的倒数第n个子元素
:only-child 选择其父元素仅有的子元素
:only-of-type 选择其父元素同类型子元素中仅有的一个
:empty 选择没有子元素的元素
:not(selector) 选择不符合给定选择器的元素
:nth-of-type(n) 选择同类型子元素中的第n个元素
:nth-last-of-type(n) 选择同类型子元素中的倒数第n个元素
:first-of-type 选择同类型子元素中的第一个元素
:last-of-type 选择同类型子元素中的最后一个元素
:lang(language) 选择带有指定语言的元素
:focus 选择获得焦点的元素
:target 选择当前活动的目标元素
:enabled 选择启用的元素
:disabled 选择禁用的元素
:checked 选择被选中的元素(如单选按钮或复选框)
:not(selector) 否定选择器,返回与给定选择器不匹配的元素
:root 选择文档的根元素
:nth-root(n) 选择根元素的第n个子元素
目录
相关文章
|
3月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
3月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
34 0
|
3月前
|
前端开发
CSS属性
CSS属性
32 0
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
24 1
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
36 2
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
44 3
前端基础(五)_CSS文本文字属性、背景颜色属性
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
1月前
|
前端开发
css简写属性
css简写属性
30 0
|
2月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0