PS的安装、背景、背景练习、雪碧图、线性渐变、径向渐变、电影卡片练习——06fontbackground

news2024/11/13 12:32:20

目录

一、PS的安装

二、背景(background-color、background-image、 background-repeat、background-position、background-clip、background-origin、background-size、background-attachment)

三、背景练习(背景重复—导航条的背景颜色是渐变的)

四、背景练习(按钮练习)

五、雪碧图

六、线性渐变

七、径向渐变

八、电影卡片练习

一、PS的安装

ps安装后,默认单位是厘米,我们应修改为像素

右击图中位置,选择”界面选项“ —— 单位与标尺—— 把单位改为像素

ctrl + R 可以将标尺显示出来,同时可以直接拖动标尺做辅助线 ,还可以直接拖回去

二、背景(background-color、background-image、 background-repeat、background-position、background-clipbackground-origin、background-size、background-attachment)

background-color  设置背景颜色

background-image  设置背景图片

        使用 url( ) 指定图片路径,路径可以用引号引起来

     - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色

     - 如果背景图片小于元素,则背景图片会自动在元素中平铺将元素铺满

        如果背景图片大于元素,将会有一部分背景无法显示

        如果背景图片和元素一样大,则会直接正常显示

 background-repeat  用来设置背景的重复方式

        可选值:

                repeat  默认值,背景会沿着x轴 y轴双方向重复

                repeat-x  沿着x轴方向重复

                repeat-y   沿着y轴方向重复

                no-repeat  背景图片不重复

background-position   用来设置背景图片的位置

        设置方式:

                通过 top right bottom left center 几个表示方位的词来设置元素图片的位置

                        使用方位词时必须要同时指定两个值,如果只有一个值,第二个值默认为center

                通过偏移量来指定背景图片的位置

                        水平方向的偏移量  垂直方向的偏移量

background-clip 设置背景的范围

        可选值:

                border-box  默认值, 背景会出现在边框的下边

                padding-box  背景不会出现在边框,只出现在内容区和内边距

                content-box   背景只会出现在内容区

background-origin  背景图片的偏移量的计算的原点        

        padding-box 默认值 background-position从内边距处开始计算

        content-box  背景图片的偏移量从内容区处计算

        border-box  背景图片的偏移量从边框处开始计算

background-size  设置背景图片的大小

        第一个值表示宽度

        第二个值表示高度

                如果只写一个,则第二个值默认为 auto 

        cover 图片的比例不变,将元素铺满

        contain  图片的比例不变,将图片在元素中完整显示

background-attachment  背景图片是否跟元素移动

        可选值:

                scroll  默认值 背景图片会跟随元素移动

                fixed 背景图片会固定在页面中,不会随元素移动·

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box1{
        width: 500px;
        height: 500px;
        /* 边框下也有背景 */
        border:10px red double ;
        background-color: #bfa;
        /* background-image: url(./exercise/练习的截图/网易新闻.webp); */
        background-image: url(./exercise/JS143练习的图片/蓝色4.jpg);

        background-repeat:no-repeat;
        /* background-position:-10px 100px; */
        /* background-clip: content-box; */
        padding: 10px;
        /* background-origin:border-box ; */
        background-size:contain;
        overflow:scroll;
       }
       .box2{
        width: 300px;
        height: 1000px;
        background-color: orange;
        background-image: url(./exercise/练习的截图/京东上.png.webp);
        background-repeat: no-repeat;
        background-attachment: scroll;
       }
       
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

background  背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,且该样式没有顺序要求,也没有哪个属性是必须要写的

注意:

        1. background-size 要写到background-position后面,且需要用斜杠隔起来

                如:center center/contain,必须要写在background-position 的后面

        2. background-origin 和 background-clip 两个样式的属性值相同,它俩有顺序要求,background-origin 要写在前面,background-clip写在后面

三、背景练习(背景重复—导航条的背景颜色是渐变的)

导航条从上到下是渐变的,可以从导航条上取一个像素大小的块,把这一个像素在元素直接进行水平方向的重复

在ps中使用矩形选择工具选择一个宽为1像素高为导航条高度的块,然后点击”图像“——”裁剪“,保存到桌面,得到一个像素大小的块

将该图片放到项目中,使用background-image导入,并设置元素的background-repeat为repeat-x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 990px;
            height: 32px;
            /* background-image: url(./练习的截图/pg.png);
            background-repeat: repeat-x; */
            background:url(./练习的截图/pg.png) repeat-x;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

四、背景练习(按钮练习)

ctrl + f5 强制清除缓存刷新

注意:

图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载

        浏览器加载外部资源时是按需加载的,用则加载,不用则不加载

        像我们上边的练习link会首先加载,而hover和active会在指定状态触发时才会加载

        这样会使在每次指定状态第一次触发(由于浏览器的缓存机制,第一次触发后不会再在加载)时,加载页面可能会出现闪烁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url(./练习的截图/link.png);
        }
        a:hover{
            background-image: url(./练习的截图/hover.png);
        }
        a:active{
            background-image: url(./练习的截图/active.png);
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>

五、雪碧图

解决图片闪烁问题:

        可以将多个小图片保存到一个大图片中,然后通过调整background-position来显示图片

        这样图片就会同时加载到网页中,就可以有效的避免出现闪烁的问题

        这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url(./练习的截图/btn.png);
        }
        a:hover{
            background-position: -93px;
        }
        a:active{
            background-position: -186px;
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>

雪碧图的使用步骤:

        1. 先确定要使用的图标

        2. 测量图标的大小

        3. 根据测量结果创建一个元素

        4. 将雪碧图设置为元素的背景图片

        5. 设置一个偏移量以显示正确的图片

雪碧图的特点:

        一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户的体验

局限:只适用于背景图片,若是img则不可以

六、线性渐变

通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果

!!渐变是图片,需要通过background-image来设置

linear-gradient()  线性渐变,颜色沿着一条直线发生变化,可以写多个颜色

   linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域,注意两个颜色间加逗号,

     - 线性渐变的开头,我们可以指定一个渐变的方向

           to left

           to right

           to bottom  默认值

           to top

           xxxdeg   deg表示度数

           xxxturn   turn表示圈

        如 linear-gradient(to left,red,yellow),用逗号隔开

            linear-gradient(180deg,red,yellow)

     - 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布

           也可以手动指定渐变的分布情况,在颜色后面写,与颜色无需逗号隔开

                linear-gradient(180deg,red 50px,yellow 100px) 表示红色最浓的区域从50px开始,之前的也是红色最浓的

repeating-linear-gradient()  可以平铺的线性渐变

    如repeating-linear-gradient(red 50px,yellow 100px)表示50-100为渐变,然后别的位置进行重复

    background-repeat: no-repeat 不会对其产生影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /* background-color: #bfa; */
            background-image: linear-gradient(to left,red,yellow);
            background-image: linear-gradient(180deg,red 50px,yellow 100px);
            background-image: repeating-linear-gradient(red 50px,yellow 100px);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

七、径向渐变

radial-gradient( )  径向渐变(放射性的效果)

        默认情况下,径向渐变的形状根据元素的形状来计算的 

                正方形  -->  圆形

                长方形  -->  椭圆形

                - 我们可以手动指定径向渐变的大小 如radial-gradient(100px 100px,red, yellow)

                         repeating-radial-gradient(100px 100px,red, yellow)

                    circle  圆形  radial-gradient(circle,red, yellow)

                    ellipse 椭圆

        - 也可以指定渐变的位置,用at  如radial-gradient(100px 100px at 100px 100px,red, yellow)

        - 语法:

                radial-gradient(大小 at 位置,颜色 位置,颜色 位置)

                        大小:

                                circle  圆形

                                ellipse  椭圆

                                closest-side  近边

                                closest-corner  近角

                                farthest-side  远边

                                farthest-corner  远角

                                自己指定像素值

                        位置:

                                top right left center bottom  自己指定像素值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-image: radial-gradient(closest-side at 100px 100px,red, yellow);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

八、电影卡片练习

<!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>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <style>
        .outer{
            width: 240px;
            /* 设置阴影 */
            box-shadow: 0 0 10px rgba(0,0,0,.3);
        }
        /* .img-wrapper{
            border: 1px solid red;
        } */
        /* 设置图片 */
        .img-wrapper img{
            width: 100%;
            /* 图片与元素有间隙,基线要去掉 */
            vertical-align: top;
        }
        .info{
            padding: 0 18px;
            color: #acaaaa;
            font-size: 14px;
        }
        /* 设置标题 */
        .info .title{
            font-size: 18px;
            color: #717171;
            margin: 13px 0 15px 0;
        }
        .info .category i{
            margin-left: 4px;
            margin-right: 7px;
        }
        /* 设置简介样式 */
        .info .intro{
            /* margin-left: 4px;
            margin-top: 18px;
            margin-bottom: 18px; */
            margin: 18px 4px;
            line-height: 20px;
        }
        /*设置下边的内容  */
        .star-wrapper{
            height: 46px;
            border-top: 1px solid #e9e9e9;
            line-height: 46px;
            color: #ddd;
            padding: 0 16px;
        }
        /* 设置星星样式 */
        .star{
            float: left;

        }
        .star-wrapper .light{
            color: #b9cb41;
        }
        .star-wrapper .weibo{
            float: right;
        }
    </style>
</head>
<body>
    <!-- 创建一个外层容器 -->
    <div class="outer">
        <!-- 创建图片容器 -->
        <div class="img-wrapper">
            <!-- 设置图片 -->
            <img src="./exercise/练习的截图/movie.png" alt="">
        </div>
        <!-- 创建内容区容器 -->
        <div class="info">
            <h2 class="title">
                动画电影
            </h2>
            <h3 class="category">
                <i class="fas fa-map-marker-alt"></i>
                动画
            </h3>
            <p class="intro">
                这是一部迪士尼的动画电影,非常非常的好看
            </p>
        </div>
        <!-- 创建评分的容器 -->
        <div class="star-wrapper">
            <!-- 创建星星 -->
            <ul class="star">
                <li class="fas fa-star light"></li>
                <li class="fas fa-star light"></li>
                <li class="fas fa-star"></li>
                <li class="fas fa-star"></li>
            </ul>
            <!-- 创建 -->
            <ul class="weibo">
                <li class="fab fa-weibo"></li>
            </ul>
        </div>
    </div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108519.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】深度讲解栈、栈的应用举例、栈和递归的实现教你全面认识栈

目录一.栈1.栈的概念及结构2.栈的实现stack.hStack.c二.栈的应用举例1.数制转换2.有效的括号3.迷宫求解三.栈与递归的实现1.栈和递归2.迷宫问题递归实现3.汉诺塔栈实现一.栈 入栈出栈展示&#xff1a; 1.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许…

【Web开发】Python实现Web服务器(Ubuntu下安装Flask)

&#x1f37a;基于Python的Web服务器系列相关文章编写如下&#x1f37a;&#xff1a; &#x1f388;【Web开发】Python实现Web服务器&#xff08;Flask快速入门&#xff09;&#x1f388;&#x1f388;【Web开发】Python实现Web服务器&#xff08;Flask案例测试&#xff09;&a…

【ESP32+freeRTOS学习笔记-(三)任务】

目录1、任务相关基本概念1.1 任务函数原型1.2 任务句柄TaskHandle_t 及任务控制块TCB_t1.3 任务状态1.4 优先级(Task Priorities)2 创建任务2.1 xTaskCreate2.2 xTaskCreateStatic()3 延迟函数使任务进入阻塞状态vTaskDelay()函数vTaskDelayUntil&#xff08;&#xff09;函数4…

【C++初阶】vector的模拟实现

文章目录vector的介绍vector的模拟实现成员变量Member functionsconstructor&#xff08;构造函数&#xff09;destructor&#xff08;析构函数&#xff09;operatorIteratorsbeginendCapacitysizecapacityreserveresizeElement accessoperator[]Modifierspush_backpop_backins…

手办商城系统|Springboot+vue+ElementUI手办商城系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助 收藏点赞不迷路 关注作者有好处 文末获取源…

C语言重点解剖预处理要点速记

1.宏定义字符串的时候一定要带上双引号。 2.程序的翻译&#xff0c;就是把文本代码翻译成二进制代码。分为4个阶段&#xff0c;即预处理&#xff0c;编译&#xff0c;汇编&#xff0c;链接。 3.预处理&#xff1a;头文件展开&#xff0c;去注释&#xff0c;宏替换&#xff0c…

基于Spring cloud + vue 的前后端分离的社团管理系统,数据库采用MYSQL,前端使用 VUE + element

背景 因学校没有成熟的社团管理系统&#xff0c;一为满足学校需求&#xff0c; 其次开源的社团管理项目&#xff0c;多为mvc ssm框架 很少有前后端分离的微服务框架&#xff0c;为了科技的发展&#xff0c; 更好学习解决高并发问题&#xff0c;也为了更好地掌握锤炼新技术&…

Web前端:广州蓝景实训

0基础也能学&#xff0c;5个月的课程时间&#xff0c;从小白到就业课程内容紧贴市场就业要求。广州蓝景前端实训课程&#xff0c;6年时间培养出过千名工程师&#xff0c;成功就业。今天就跟大家分享&#xff0c;蓝景学员的学习体验流程&#xff1a; 一、前端技术学习 1、授课…

3.Kafka

1.定义 1.1传统定义 Kafka是一个分布式的基于发布订阅模式的消息队列&#xff0c;主要应用于大数据的实时处理领域发布订阅&#xff1a;消息发布者不会直接将消息发送给订阅者&#xff0c;而是将发布的消息分为不同的类别&#xff0c;订阅者只接收感兴趣的消息 1.2最新定义 …

计算机网络期末重点考点总复习

第三章数据链路层 CRC检验问题 知识点 例题 要发送的数据为1101011011。采用CRC的生成多项式是 P(X)X^4 X 1试求应添加在数据后面的余数。数据在传输过程中最后一个1变成了0&#xff0c;问接收端能否发现&#xff1f; 若数据在传输过程中最后两个1都变成了0&#xff0c;问接…

MacOS系统安装Qt教程

我以为搜索QT下载&#xff0c;安装好QT Creator就能开开心心HelloWorld&#xff0c;然而还是太年轻了&#xff0c;一个 No suitable kit found 报错告诉我&#xff0c;可能没那么简单。于是&#xff0c;我去查了查&#xff0c;大概原因就是苹果处理器和x86不太一样&#xff0c;…

借助这几个工具,轻松实现在手机压缩视频

我有一个习惯&#xff0c;就是会将生活中发生的趣事&#xff0c;或是沿途好看的风景&#xff0c;用手机录制下来&#xff0c;这样的话&#xff0c;后续再回看这些视频的时候&#xff0c;就能勾起相对应的美好回忆。 但是久而久之&#xff0c;这些视频积累太多的话&#xff0c;就…

Springboot 2.7.5 HikariCP 连接池多数据源配置

一. 引言 当前项目遇到需要连接多个数据库的场景&#xff0c;此时需要引入多数据源了. 还有一些诸如以下的场景: 与第三方对接时&#xff0c;有些合作方并不会为了你的某些需求而给你开发一个功能&#xff0c;他们可以提供给你一个可以访问数据源的只读账号&#xff0c;你需要…

Web漏洞扫描篇-Nessus使用

软件介绍 Nessus是一种漏洞扫描器&#xff0c;个人和组织广泛使用它来识别和修复计算机系统中的漏洞。Nessus可以扫描广泛的漏洞&#xff0c;包括缺少补丁、弱密码和配置错误的系统&#xff0c;它可以扫描单个系统或整个网络上的漏洞。Nessus可以在各种平台上运行&#xff0c;…

【云原生进阶之容器】第一章Docker核心技术1.10节——Docker网络模型设计

1 容器网络背景概述 1.1 Linux的namespace+cgroup 先来简要回顾一下前面的内容,namespace和cgroup是Linux 内核的两大特性,namespace的诞生据说就是为了支持容器技术,那么这俩特性到底干了啥呢? - namespace:linux支持多种类型的namespace,包括Network,IPC,PID, Mount…

基于HOG、LBP完成特征工程,基于SVM/RF/XGBOOST/GBDT/CNN/DNN完成人脸识别+表情识别

在我之前的文章中写过很多关于人脸识别和表情识别的文章&#xff0c;今天有一个项目的需求就是需要做两种或者是多种任务&#xff0c;我在开发完对应的模型之后就突然想到了之前做过的人脸识别和表情识别的项目&#xff0c;就想着是否可以基于机器学习/深度学习等方式来同时实现…

算法训练第五十七天 | LeetCode 647、516动态规划结尾

LeetCode 647回文子串 题目简析&#xff1a; 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 思路分析&#xff1a; 本题的难点 主要…

【Aptos与Sui智能合约】(Move长话短说) #03 - 智能合约编写与发布

前言:本篇学习如何在Aptos上发布两个自定义的智能合约 0x1 前置条件 安装好Aptos工具,MacOS、Ubuntu、Windows系统的预编译的安装包下载地址 https://github.com/aptos-labs/aptos-core/releases?q=cli&expanded=true 想自己从源码开始编译,你就下载Source Code 安装…

千万不要把Request传递到异步线程里面,有坑

前几天在网上冲浪的时候看到一篇技术文章&#xff0c;讲的是他把一个 request 请求传递到了线程池里面&#xff0c;然后遇到了一个匪夷所思的情况。 他写了这篇文章&#xff0c;把自己针对这个问题的探索过程分享了出来&#xff1a; 《springboot 中如何正确的在异步线程中使用…

艾美捷脂质过氧化检测试剂盒参数说明和文献参考

脂质过氧化的定量对于评估氧化损伤在病理生理学疾病中的作用至关重要。脂质过氧化导致饱和和不饱和脂质的高反应性和不稳定的氢过氧化物的形成。 艾美捷脂质过氧化检测试剂盒直接利用与亚铁离子的氧化还原反应测量过氧化氢&#xff0c;将脂质过氧化氢提取到氯仿中&#xff0c;提…