1. 首页
  2. 标签
  3. css
详解CSS层叠上下文（解析z-index不生效的原因）
System
2024-08-15
所有,css3

在CSS中，z-index属性主要用于控制定位元素（例如使用position属性设置为relative、absolute、fixed或sticky的元素）的堆叠顺序。但是，z-index的值只有在元素的祖先元素都没有创建新的层叠上下文，或者在同一个层叠上下文中时，才会正确工作。

如果z-index不生效，可能的原因和解决方法如下：

  1. 父元素创建了新的层叠上下文：

    • 解决方法：调整父元素的z-index或使用position: relative而不是创建层叠上下文的属性（如opacity, filter, transform, will-change, mix-blend-mode, perspective, isolation等）。

  2. 使用的是position: static ：

    • 解决方法：将元素的position属性设置为relative、absolute、fixed或sticky。

  3. 元素被遮挡：

    • 解决方法：调整元素的布局，确保没有其他元素遮挡住它。

  4. 使用了z-index: auto ：

    • 解决方法：显式设置z-index为一个正值，不要使用默认值auto。

  5. 使用了CSS Flexbox或CSS Grid布局：

    • 解决方法：如果在Flex子项或Grid项上使用z-index不生效，可以尝试给子项添加position: relative或position: absolute。

  6. 父元素使用了overflow: hidden或overflow: auto ：

    • 解决方法：移除或调整父元素的overflow属性，或者给父元素也设置一个z-index值。

  7. 浏览器渲染问题：

    • 解决方法：尝试使用不同的浏览器或清除缓存，有时候是浏览器渲染问题导致z-index不生效。

总结，要使z-index生效，确保元素具有定位属性（position: relative、position: absolute、position: fixed或position: sticky），并且没有创建新的层叠上下文，同时还要避免被其他元素遮挡。

- 阅读更多 -
CSS3- css3新增样式（圆角边框border-radius、边框图片border-image、盒子阴影box-shadow）
System
2024-08-15
所有,css3

CSS3 提供了几个新的样式属性，包括：

  1. 圆角边框（border-radius）：可以让你的元素的边角变得圆润。
  2. 边框图片（border-image）：可以让你使用图片作为元素的边框。
  3. 盒子阴影（box-shadow）：可以给元素添加阴影。

以下是这些属性的简单示例：

  1. 圆角边框（border-radius）:



div {
  border: 2px solid #000;
  border-radius: 10px; /* 设置圆角的大小 */
}
  1. 边框图片（border-image）:



div {
  border: 10px solid;
  border-image: url(border.png) 30 round; /* 设置边框图片，并设定切片大小和平铺方式 */
}
  1. 盒子阴影（box-shadow）:



div {
  box-shadow: 5px 5px 10px #000; /* 设置阴影的水平偏移、垂直偏移、模糊半径和颜色 */
}

这些是 CSS3 中的基本样式，每个属性都有更多的高级用法和值选项，可以通过文档和专业资源深入学习。

- 阅读更多 -
【案例篇3】HTML+CSS实现简洁大方的登录注册页面02（源码）
System
2024-08-15
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册页面</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f7f7;
        }
        .container {
            background-color: #444;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            width: 300px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding: 20px;
        }
        h2 {
            color: #eee;
            font-family: Arial, sans-serif;
            margin: 10px 0;
        }
        .input-container {
            display: flex;
            flex-direction: column;
        }
        .input-container input {
            width: 250px;
            margin-bottom: 10px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #f0f0f0;
            font-size: 16px;
            transition: .3s;
        }
        .input-container input:focus {
            background-color: #eee;
            outline: none;
        }
        .btn {
            width: 250px;
            background-color: #555;
            border: none;
            height: 40px;
            border-radius: 5px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            transition: .3s;
        }
        .btn:hover {
            background-color: #666;
        }
        .links {
            color: #aaa;
            margin-top: 10px;
            font-size: 14px;
        }
        .links a {
            text-decoration: none;
            color: #bbb;
        }
        .links a:hover {
            color: #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>登录</h2>
        <div class="input-containe
- 阅读更多 -
css的filter全属性图文介绍
System
2024-08-15
所有,css3

CSS的filter属性用于应用图像的可视效果，如模糊或者饱和度调整。filter属性的全部属性值如下：

  1. none：定义无效果
  2. blur(px)：定义模糊效果
  3. \`brightness(%)：定义亮度效果
  4. \`contrast(%)：定义对比度效果
  5. drop-shadow()：定义阴影效果
  6. \`grayscale(%)：定义灰度级效果
  7. hue-rotate(deg)：定义色调旋转效果
  8. \`invert(%)：定义反色效果
  9. \`opacity(%)：定义透明度效果
  10. \`saturate(%)：定义饱和度效果
  11. \`sepia(%)：定义深褐色效果

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
/* 应用模糊效果 */
.blur {
  filter: blur(5px);
}
 
/* 应用亮度效果 */
.bright {
  filter: brightness(50%);
}
 
/* 应用对比度效果 */
.contrast {
  filter: contrast(200%);
}
 
/* 应用阴影效果 */
.shadow {
  filter: drop-shadow(16px 16px 20px red);
}
 
/* 应用灰度效果 */
.gray {
  filter: grayscale(100%);
}
 
/* 应用色调旋转效果 */
.hue {
  filter: hue-rotate(90deg);
}
 
/* 应用反色效果 */
.invert {
  filter: invert(100%);
}
 
/* 应用透明度效果 */
.opacity {
  filter: opacity(50%);
}
 
/* 应用饱和度效果 */
.saturate {
  filter: saturate(300%);
}
 
/* 应用深褐色效果 */
.sepia {
  filter: sepia(60%);
}
</style>
</head>
<body>
 
<img src="image.jpg" alt="原始图片">
<img class="blur" src="image.jpg" alt="模糊效果">
<img class="bright" src="image.jpg" alt="亮度效果">
<img class="contrast" src="image.jpg" alt="对比度效果">
<img class="shadow" src="image.jpg" alt="阴影效果">
<img class="gray" src="image.jpg" alt="灰度效果">
<img class="hue" src="image.jpg" alt="色调旋转效果">
<img class="invert" src="image.jpg" alt="反色效果">
<img class="opacity" src="image.jpg" alt="透明度效果">
<img class="saturate" src="image.jpg" alt="饱和度效果">
<img class="sepia" src="image.jpg" alt="深褐色效果">
 
</body>
</html>

在这个例子中，我们有一个原始的图片，然后应用了各种filter效果。每个类都是一个效果，你可以打开浏览器查看效果。

- 阅读更多 -
CSS通过blur实现高斯模糊
System
2024-08-15
所有,css3

在CSS中，可以使用filter属性的blur()函数来实现高斯模糊效果。blur()函数接受一个参数，表示应用模糊的像素范围。

下面是一个简单的例子，演示如何使用CSS来实现高斯模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gaussian Blur Example</title>
<style>
  .blur-box {
    width: 200px;
    height: 200px;
    background-color: #f00;
    filter: blur(10px); /* 应用高斯模糊，半径10px */
  }
</style>
</head>
<body>
 
<div class="blur-box"></div>
 
</body>
</html>

在这个例子中，.blur-box 类应用了一个blur(10px)效果，使得该元素的背景色有一个高斯模糊的效果。可以通过调整blur()函数中的值来改变模糊的程度。

- 阅读更多 -
【css3】png图片实现动态动画
System
2024-08-15
所有,css3

要使用CSS3实现PNG图片的动画效果，可以使用@keyframes规则来创建动画，并使用background-position属性来实现帧的移动。以下是一个简单的例子，展示了如何使用CSS3动画使一个PNG图片的动画：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 PNG动画示例</title>
<style>
  .animated-image {
    width: 100px;
    height: 100px;
    background-image: url('animated-sprite.png');
    background-repeat: no-repeat;
    animation: moveSprite 1s steps(8) infinite;
  }
 
  @keyframes moveSprite {
    0%   { background-position: 0 0; }
    100% { background-position: -800px 0; }
  }
</style>
</head>
<body>
<div class="animated-image"></div>
</body>
</html>

在这个例子中，.animated-image 类定义了一个带有动画效果的DIV。@keyframes moveSprite 定义了动画的名称，其中steps(8)表示动画将被分解为8步，因此每个步骤应该是整个动画周期的1/8。background-position 属性则根据动画的进度移动背景图片的位置，实现动画的展示。

确保你的animated-sprite.png是一个由不同动画帧组成的单一的PNG图片，并且每个帧的宽度加起来等于整个图片的宽度，这样background-position才能正确地定位到每个动画帧。

- 阅读更多 -
CSS基础知识——Float Position flex布局
System
2024-08-15
所有,css3

在CSS中，有三种主要的布局方式：使用浮动（float），使用绝对定位（position），以及使用Flex布局。以下是每种方式的简单示例：

  1. 浮动（float）：



.float-left {
  float: left;
}
 
.float-right {
  float: right;
}



<div class="float-left">左边内容</div>
<div class="float-right">右边内容</div>
  1. 定位（position）：



.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



<div class="absolute-center">居中内容</div>
  1. Flex布局：



.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}



<div class="flex-container">
  <div>居中内容</div>
</div>

这些是CSS布局的基础知识，每种方式都有其适用的场景，例如Flex布局适合更复杂的响应式布局，而浮动则用于创建文本环绕的效果。定位则提供了高度的灵活性，但需要小心处理，因为它会脱离正常的文档流。

- 阅读更多 -
CSS3-使用transform+animation实现圆弧渐变旋转动画，详细教程+源代码
System
2024-08-15
所有,css3



/* 定义动画 */
@keyframes spin-arc {
    0% {
        transform: rotateX(5deg) rotateY(-5deg) rotate(0deg) translateZ(200px);
    }
    100% {
        transform: rotateX(5deg) rotateY(-5deg) rotate(360deg) translateZ(200px);
    }
}
 
/* 应用动画的元素 */
.arc-animation {
    width: 100px;
    height: 50px;
    background: conic-gradient(#3498db, #2980b9);
    border-radius: 25px 25px 0 0; /* 圆弧形状 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center bottom; /* 动画中心点 */
    animation: spin-arc 5s linear infinite; /* 动画名称，持续时间，速率函数，循环次数 */
}

这段代码定义了一个名为.arc-animation的CSS类，它使用了transform和animation属性来创建一个无限循环的圆弧渐变旋转动画。通过conic-gradient我们创建了一个圆弧形的渐变背景，并且通过@keyframes定义了旋转的动画。这个类可以被用在任何需要创建旋转动画的HTML元素上。

- 阅读更多 -
【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )
System
2024-08-15
所有,css3

在CSS中，可以使用rgba颜色格式来设置背景颜色的半透明效果。rgba代表红绿蓝三色加上alpha通道（透明度）。




/* 设置元素背景颜色为半透明 */
.element {
  /* 这里的0.5是透明度，可以根据需要调整范围在0到1之间 */
  background-color: rgba(255, 255, 255, 0.5); /* 白色半透明 */
}

实例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景半透明示例</title>
<style>
  .transparent-bg {
    /* 背景颜色半透明 */
    background-color: rgba(255, 0, 0, 0.3); /* 红色半透明 */
    width: 200px;
    height: 200px;
    margin: 20px;
  }
</style>
</head>
<body>
 
<div class="transparent-bg"></div>
 
</body>
</html>

在上述代码中，.transparent-bg 类设置了一个200x200像素的红色背景，该背景具有30%的透明度。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号