背景&背景练习&雪碧图使用

最新推荐文章于 2022-07-14 00:05:48 发布
最新推荐文章于 2022-07-14 00:05:48 发布
阅读量304 收藏
点赞数
分类专栏： HTML&CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42919799/article/details/106025639
版权

背景&背景练习&雪碧图使用

背景一
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1 {
            width: 1000px;
            height: 1000px;
            /* 居中设置 */
            margin: 0 auto;
            /* 设置背景样式 */
            background-color: #bbffaa;
            /* 
            使用background-image来设置背景图片
                语法：background-image:url(相对路径);
                如果背景图片大于元素，默认会显示图片的左上角
                如果背景图片和元素一样大，则会将背景图片全部显示
                如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
            可以同时为一个元素指定背景颜色和背景图片，
                这样背景颜色将作为背景图片的底色
                一般情况下设置背景图片时会同时指定一个背景颜色
             */
            background-image: url(01.jpg);
            /* 
            background-repeat 用于设置背景颜色的重复方式
            可选值：
                repeat 默认值，背景图片会双方向重复（平铺）
                no-repeat 背景图片不会重复，有多大就显示多大
                repeat-x 背景图片沿水平方向重复
                repeat-y 背景图片沿垂直方向重复
             */
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>
练习一
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1 {
            width: 990px;
            height: 32px;
            background-color: #bbffaa;
            /* 设置居中 */
            margin: 50px auto;
            /* 设置为背景图片 */
            background-image: url(1.png);
            /* 设置水平方向重复 */
            background-repeat: repeat-x;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>
背景二
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1 {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /* 设置一个背景颜色 */
            background-color: #bbffaa;
            /* 设置一张背景图片 */
            background-image: url(01.jpg);
            /* 设置图片不重复出现 */
            background-repeat: no-repeat;
            /* 背景图片默认在左上角显示
                通过background-position可以调整背景图片在元素中的位置
                可选值：
                    该属性可以使用top right left bottom中的两个值
                        来指定一个背景图片的位置
                        top left 左上
                        bottom right 右下
                        如果只给出一个值，则第二个值默认是center
                    
                    background-position: center;

                    也可以直接指定两个偏移量，
                    第一个值是水平偏移量
                        如果指定的是一个正值，则图片会向右移动指定的像素
                        如果指定的是一个负值，这图片会向左移动指定的像素
                    第二个是垂直偏移量
                        如果指定的是一个正值，则图片会向下移动指定的像素
                        如果指定的是一个负值，这图片会向上移动指定的像素
             */
            background-position: -80px -40px;
        }
        
        body {
            background-image: url(01.jpg);
            background-repeat: no-repeat;
            /* 
            background-attachment 用来设置背景图片是否随页面一起滚动
            可选值：
                scroll 默认值，背景图片随着窗口一起滚动
                fixed 背景图片会固定在某一位置，不会随着页面滚动而滚动
             */
            background-attachment: fixed;
        }
    </style>
</head>

<body style="height: 5000px;">
    <div class="box1"></div>

</body>

</html>
练习二&雪碧图使用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .btn:link {
            /* 将文档流元素转换为块元素 */
            display: block;
            width: 150px;
            height: 150px;
            /* 设置背景图片 */
            /* background-image: url(1.jpg); */
            /* 设置背景图片不重复 */
            /* background-repeat: no-repeat; */
            /* ---------------------- */
            /* 
            以上设置样式过于麻烦，一下是简写属性书写方法
            background
                通过属性可以同时设置所有的背景相关的样式
                没有顺序要求，没有数量要求
             */
            background: url(1.jpg) no-repeat;
        }
        /* 
        background-position 来切换要显示的图片的位置，
            这种技术叫做图片整合技术有名雪碧图（CSS-Sprite）
        优点：
            1. 将多个图片整合为一张图片，浏览器只需要发送一次请求
                可以同时加载多张图片，为提高访问效率，提高了用户效率
            2. 将多个图片整合为一张图片，减少了图片的总大小，提高请求速度，
                增加了用户体验
         */
        
        .btn:hover {
            /* 当是hover 状态时，希望图片向左移动*/
            background-position: -90px 0px;
        }
        
        .btn:active {
            /* 当是hover 状态时，希望图片向下移动*/
            background-position: -190px -10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个超链接 -->
    <a class="btn" href="#"></a>
</body>

</html>
逻辑鬼才不太聪明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易亚马逊雪碧图
09-12
3. **CSS编写**：编写CSS样式，使用`background-image`属性设置雪碧图的URL，然后通过`background-position`来调整背景位置，展示出雪碧图中需要的部分。 4. **HTML应用**：在HTML中应用这些CSS类，将雪碧图中的每...
Vue3项目练习静态资源assets
最新发布
05-24
在Vue3项目中，静态资源管理是一个至关重要的部分，它涉及到应用的视觉...通过合理地组织和引用静态资源，可以提高代码的可读性，同时也能优化应用的性能，比如通过懒加载或雪碧图技术来减少HTTP请求和优化加载速度。
css3 过渡
qq_36146167的博客
01-23 209
过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 transition-property transition-property: 指定要执行过渡的属性 多个属性间使用 , 隔开 如果所有属性都需要过渡，则使用 all 关键字，all 是 默认值 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡 transition: width, margin; transition: all; transit
~86米兔练习
sanda_nd的博客
02-13 221
Web前端基础全家桶教程（含HTML、CSS、 HTML5、CSS3）
12-19
本套Web前端基础全家桶教程是全新录制，将前端学习的基础内容融汇为148节课，涵盖了HTML、CSS、HTML5和CSS3的核心技术点。通过对本教程的学习，可以帮助初学者快速上手，并完成大部分静态网页的开发。 教程的具体内容包括：基本的html标签、html5新标签、css的基本用法、盒子模型、浮动、定位、flexbox、css sprite、 iconfont、transform、transition、animation、media query、less、vs code、Photoshop等；还包含了移动端开发的基础知识，如视口、移动端的适配等（这些内容使我们可以在不应用任何js代码的情况下即完成移动端的适配）。除此之外，课程涵盖 大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。
尚硅谷html练习-雪碧图 按键练习
weixin_58264104的博客
07-14 317
尚硅谷html练习-雪碧图 按键练习
前端 雪碧图（亚马逊）练习题
cc576795555的博客
12-27 780
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;作业1227&amp;lt;/title&amp;g
精灵图片zsbd.rar
01-04
同时，使用雪碧图工具（如Sprite Cow、CSS Sprites Generator等）可以帮助简化精灵图的管理和创建过程。 6. **SVG精灵**：随着SVG（Scalable Vector Graphics）的流行，一些开发者开始使用SVG精灵来替代传统PNG或...
一个以途牛为题的练习题目
06-22
在实现这个项目时，开发者还需要关注性能优化，例如减少HTTP请求，合并CSS和JavaScript文件，使用雪碧图（sprite sheet）或图标字体来减少图像请求，以及利用浏览器缓存等策略。 总的来说，"一个以途牛为题的练习...
Web 开发常用的小图片
12-21
2. CSS背景精灵：与雪碧图类似，背景精灵是将多个小图合并到一个背景图中，通过CSS的background-position属性定位显示。这种方法尤其适用于按钮、导航条等元素，可实现动态效果并减少HTTP请求。 3. 使用Icon Font：...
CSS——背景的相关属性以及雪碧图的使用方法
Bonsoir777的博客
07-02 208
背景的相关属性以及雪碧图的使用方法
Html+Css小tips:雪碧图练习
weixin_48451943的博客
09-15 202
解决图片加载闪烁问题 .btn{ display: block; width: 93px; height: 29px; background-image: url(./1.png); } .btn:hover{ background-position: -93px 0; } .btn:active{ background-position: -186px 0; }
html元素背景与雪碧图
YuTinH的博客
05-24 936
元素背景： 例如： background-position:100px 100px; background-position:top left; 第一种形式更精确些 简写： 雪碧图（css-sprite）： 将多张图片整合为一张图片，利用background-position来切换图片的位置 例如： 先剪出需要的，然后再用ps进行拼接 ...
HTML中的“雪碧图“详解
weixin_45276056的博客
03-17 2055
HTML中的雪碧图详解 1.雪碧图的支持格式： 每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片。 2.雪碧图的优点： (1)可以减小建立连接的消耗,加快运行。 (2)多张图片合并到一张图片中，可以减小图片的总大小。 (3)将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。 3.雪碧图的制作和使用方法： 使用图像编辑软件如Photoshop将多张图放到同...
教你来使用雪碧图（CSS sprite）
热门推荐
Allenyhy的博客
08-07 6万+
什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...
设置元素的背景和雪碧图
LXJRQJ的博客
12-27 311
设置元素的背景 一、background-color background-color属性用来为元素设置背 景颜色。 需要指定一个颜色值，当指定了一个颜色 以后，整个元素的可见区域都会使用这个 颜色作为背景色。 如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色。 二、background-image background-image可以为元素指定背景 图片。 和backg...
javascript基础 图片雪碧动画
老刘的日志博客
01-14 413
/** * Created by Administrator on 2017/1/14. */function changePicture() { //拿到div对象 var gallery = document.getElementById("picture_gallery"); var gallery_img = gallery.getElementsByTagNam
string&stringbuilder&stringbuffer类-练习
03-16
总的来说，如果需要频繁修改字符串，并且在多线程环境下使用，应该使用stringbuffer；如果在单线程环境下使用，或者只需要进行少量的字符串修改，可以使用stringbuilder。而如果不需要修改字符串，应该使用string。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值