CSS - 背景图片固定, 背景色半透明

最新推荐文章于 2024-06-14 11:43:35 发布
最新推荐文章于 2024-06-14 11:43:35 发布
阅读量269 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/117064717
版权

文章目录

一、背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

1. 语法

background-attachment: scroll | fixed

2. 参数

  • scroll : 滚动
  • fixed : 固定

二、背景复合写法

简写属性时, 没有固定的书写顺序.

div {
    width: 1920px;
    height: 1100px;
    background: red url(./images/bg.jpg) no-repeat fixed center 40px;
}

三、背景色半透明

1. 语法

background: rgba(0, 0, 0, 0.3);

可以把 0.3 的 0 省略 , 写成 .3 也是支持的

四、案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            text-decoration: none;
            line-height: 48px;
            color: white;
        }

        .bg1 {
            background-image: url(./images/bg1.png);
        }

        .bg2 {
            background-image: url(./images/bg2.png);
        }

        .bg3 {
            background-image: url(./images/bg3.png);
        }

        .bg4 {
            background-image: url(./images/bg4.png);
        }

        .bg1:hover {
            background-image: url(./images/bg11.png);
        }

        .bg2:hover {
            background-image: url(./images/bg22.png);
        }

        .bg3:hover {
            background-image: url(./images/bg1.png);
        }

        .bg4:hover {
            background-image: url(./images/bg2.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="" class="bg1">五彩导航</a>
        <a href="" class="bg2">五彩导航</a>
        <a href="" class="bg3">五彩导航</a>
        <a href="" class="bg4">五彩导航</a>
    </div>
</body>

</html>
学习中的小菜鸟.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html背景图片半透明遮罩,巧用CSS cross-fade()实现背景图像半透明效果
weixin_39757040的博客
05-31 1474
一、需求描述某元素，希望background-image背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。但是，如果是url()背景图像，似乎就无能为力了。如果是个内联的图像那很好处理，无论是filter滤镜、mask遮罩还是opacity透明度设置都可以实现我们的效果，但是偏偏这里是背...
纯css实现背景图片半透明内容不透明的方法
09-24
本文将详细讲解如何仅使用CSS实现背景图片半透明而内容保持不透明的效果，这种方法不依赖于JavaScript或任何第三方库。 首先，传统的做法是通过设置元素的`opacity`属性来实现透明效果。然而，这种方法会影响到元素...
CSS：背景图像固定（也叫背景附着）
最新发布
听海边涛声
06-14 414
CSS：背景图像固定（也叫背景附着）
CSS背景固定
WangZhang_521的博客
12-27 353
背景固定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
CSS固定背景
Biscuit0769
06-10 331
    关键字fixed用来将背景图片相对于浏览器窗口放置背景图片    background:black url(shell-bg.jpg) no-repeat fixed -237px 30px;  
Css如何实现背景色透明或半透明但内容不透明
09-25
在网页设计中，有时我们希望元素的背景颜色呈现透明或...总的来说，通过合理利用CSS的`filter`滤镜和`rgba()`函数，我们可以轻松实现背景色透明或半透明但内容不透明的效果，从而提升网页设计的视觉层次感和用户体验。
CSS 制作带边框背景色透明的消息框
09-22
CSS制作带边框背景色透明的消息框是一项技术挑战，因为它不仅要求开发者具备基础的CSS布局知识，还需要对CSS的高级特性如伪元素、绝对定位、边框技巧等有深入理解。在这个过程中，我们通常会遇到两大难点，即如何让...
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
css实现背景半透明文字不透明的效果示例
09-24
首先，我们要知道CSS中的`rgba()`函数是实现背景半透明的关键。`rgba()`函数允许我们设置颜色并指定一个介于0到1之间的透明度值，其中0代表完全透明，1代表完全不透明。例如，`rgba(255, 255, 255, 0.5)`表示一个...
css使其背景固定
darkZXB的博客
10-16 514
body {                      background-image: url(images/huarun3.jpg);                      background-repeat: no-repeat;                      font-family: "宋体";                      font-size: 12
CSS-45：背景固定
臧小川的博客
10-14 319
超大背景图片 body {
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
weixin_36431907的博客
08-03 2302
上一个博客做登陆的页面是遇到的问题，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。效果展示：内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果，达不到上述的效果方法一：设置background-color:rgba(),这种方式只能设置背景颜色的透明度。如果是背景是图片的上面的方法将就不适用，以...
css3实现背景图片半透明内容不透明的方法
Mr_jianghanlin的博客
05-14 2800
css实现背景图片半透明内容不透明的方法 上一个博客做登陆的页面是遇到的问题，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。 效果展示： 内容半透明 内容不透明 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果，达不到上述的效果 方法一：设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 如果是背景是图片的上面的方法将就不适用，以下提供两个方法： 第一个就是利用伪元素::before,
关于使用css 如何指定一个固定的背景图像
颂离歌博客
01-11 280
前言 今天在逛 b 站的时候发现一个特别有意思的css 样式 ， 之前我是没去使用过的，所以我觉得是比较有意思的 background-attachment 使用的是 css 里面的 background-attachment 属性 ： 值 描述 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动 local 背景图片会随着元素内容的滚动而滚动。 使用 fixed属性就可以让滚轮滚动的时候图片不跟随滚轮 代码 <!DOCT
CSS背景属性
weixin_70374250的博客
10-12 1086
background-origin 属性规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有。background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。
设置背景透明，内容不透明
GAMELOFT9----纸上得来终觉浅，绝知此事要躬行
10-09 1380
       之前需要做一个弹窗广告，有一个半透明的背景层，然后是广告。很简单的想到了opacity这个属性，设置后发现广告内容也透明化了，背景后面的图案和广告图案重叠，严重影响了视觉效果，如下图所示： 弹窗广告的html内容如下： &lt;!--弹窗广告--&gt; &lt;div class="pop_ad_background" style="display: none;"&gt;...
background-image定义的图片的透明度修改
热门推荐
cxb_96的博客
08-19 1万+
本文章采用的是在背景图上面加一个半透明的白色的方法 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
css 半透明的绿色背景色
02-24
要实现CSS半透明的绿色背景色，可以使用RGBA颜色值来设置背景色的透明度。RGBA颜色值由红、绿、蓝和透明度（Alpha）组成，透明度的取值范围是0到1，0表示完全透明，1表示完全不透明。 下面是一个示例代码，展示如何设置半透明的绿色背景色： ```css div { background-color: rgba(0, 255, 0, 0.5); } ``` 在上面的代码中，`rgba(0, 255, 0, 0.5)`表示绿色背景色，透明度为0.5。你可以将上述代码应用于你想要设置半透明绿色背景色的元素上，比如一个`<div>`元素。 希望这个回答能够帮到你！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值