整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用 CSS 实现倾斜的背景颜色

们在设计网站的时候,有时候为了体现出别具一格的风格,往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。

在CSS中,没有某一个属性能够直接实现倾斜的背景颜色,而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div,给这个div设定一个背景颜色,然后让这个div倾斜一个角度,从而实现倾斜的背景颜色。比如像下图所示的案例:

那么下面就来用一个基本的实例来解释并实现倾斜背景的效果:

首先要说明一下,页面导航条是固定在页面顶部的,导航条不会随着页面的滚动而移动。这个效果的实现非常简单,就是利用了 position 这个属性的 fixed 值来实现的。

我下面的代码实例中,HTML用来给页面上添加元素,而在 CSS 部分需要精细化的设定属性的参数值,而且需要若干个HTML标签的CSS来配合,从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的,大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。

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="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

为了让导航条和其他元素都能够与页面的两边留出距离,我在实际内容标签的外围又包裹了一层div,主要在这个包裹的div里设定左右内间距,从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"

在实际内容的排列时,我采用了更加方便灵活的弹性布局,这样会相对的减少HTML和CSS的代码量。

另外,如果想要实现倾斜的背景颜色,那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单,只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可,但是我们可以想象一下,原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度(-9deg)后,它会变成一个平行四边形,这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。

在大家阅读 CSS 的代码之前,我给出一个原理图来解释一下其中的原理:

当外围的 div 倾斜了之后,就需要把内容部分的div的上部的内间距增大,以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。

那么页面底部也同样需要实现这样倾斜背景颜色的设计,这样才能将风格一致,产生美感。原理还是这个原理图所示的逻辑,不同的地方在于,底部最外围的 div 不倾斜,而是需要两个属性,height 和 overflow-y,并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示,这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉,从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜,而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线,下部是横线,只有上部是斜线的带有背景颜色的四边形,这个四边形里面是实际的页面内容。

最终的样子在这篇 CSS 代码的最后展示出来了。

CSS

望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《CSS背景属性实战,灵活使用background属性,原来如此简单

本文小海老师为大家详细讲解图片精灵(CSS Sprite)的使用。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。

一、什么是图片精灵:

在一个网站中,图片是必不可少的。除了用来展示的大图片以外,还可能包括大量的图标。这些图标幅面一般较小,往往制作的较为成套,还可能出现一个图标多次使用的情况。

页面每次加载图标,都需要向网站的服务器提交一次Http请求。如果能够减少页面的Http请求次数,就可以提高网页的显示速度(当然,网页的显示速度还与很多因素有关)。

鉴于上述原因,我们想到的解决方案如下:

将网站中用到的所有图标都做到一张大图片之中,在需要显示图标的位置处,利用CSS的background-image属性加载这个大图片,再利用background-position属性定位需要显示的图标的具体位置。

这就是图片精灵(CSS Sprite)的使用原因和工作原理。下图为我们展示了搜狐网的精灵图,如下所示。

搜狐网站的精灵图实例

那么,如何制作这张大图片呢?又如何使用CSS属性来实现这个功能呢?小海老师一步一步的教大家完成图片精灵技术的使用。

二、第一步:制作精灵图。

原理中提到的所有图标都在其上的大图片,我们就把它称为“精灵图”。为了让精灵图中的图标可以用在不同背景下的场合中,一般精灵图都应该是背景透明的png格式图片。

我们可以使用Adobe Photoshop 软件来制作精灵图片。

制作精灵图片时,要将每一个图标的位置都摆好,尽量让所有图标都铺满精灵图片。最后保存的时候,可以在Photoshop中按照下列操作进行保存:

“文件”菜单 | 存储为Web和设备所用格式

选择上述命令后,Photoshop会弹出下图中所示的窗口。

存储为Web和设备所用格式

在这个窗口中:选择“png-24”,勾选“透明度”,单击“存储”。就可以保存为背景透明的png格式的图片了。

三、第二步:获得所需图标在精灵图中的数据。

例如在一个<div></div>容器中需要加载精灵图中的一个图标。那么,需要知道这个图标的下列数据:

  • 图标的大小:包括图标的宽度和高度。

  • 图标在精灵图中的位置:包括图标在精灵图中的水平坐标和垂直坐标。

图标的大小往往较为简单,因为图标是设计师自己设计并制作的,所以一开始就会知道图标的尺寸。

那么,图标在精灵图中的位置要如何知道呢?这需要借助Photoshop中的“信息”面板。

利用“信息”面板获得图标在精灵图中的坐标

在Photoshop中打开“信息”面板有下列几种方法:

  • 在“窗口”菜单 | 信息。

  • 使用快捷键:F8

在“信息”面板中的X和Y就会显示光标所在位置的坐标。我们只需将光标放在所要图标的左上角,就可以通过该面板中的X和Y后面的数据得知该图标在精灵图中的位置了。

四、第三步:利用CSS加载精灵图中的图标。

在HTML文档中有一个<div></div>标记对,该标记对的id属性取值为box。该标记对要展示一个宽度为200px,高度为50像素的图标。通过在Photoshop中测量,该图标在精灵图中的坐标为X:140、Y:52。假设精灵图存放在站点根目录的images文件夹中,文件名为 sprite.png。则下列CSS代码就可以为这个<div></div>标记对加载图标了。

<div id=”box”></div>

#box{

width:200px; height:50px;

background-image:url(../images/sprite.png);

background-position:-140px -52px;

}

为什么这样书写就可以得到这个图标呢?

首先,容器的宽度和高度限制了只能显示精灵图片中200px*50px大小的一个区域,并不能完全显示精灵图的全部内容。

其次,background-position 属性用于表示背景图片在容器中的位置。为什么是负值呢?请仔细看下图。

图片精灵的原理

我们很容易看到,选择负值,相当于精灵图的位置在容器的外部,所以指定位置的图标就显示在容器中了。

文章预告

下一篇文章中,小海老师会继续为大家向下讲解CSS属性。下一次我们讲解列表属性。对于渴望在前端开发道路上前进的你一定不能错过!

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。

索 HTML 图像的不同概念,以及如何有效地使用它们在您的网站上增加视觉吸引力、传达信息和表达情感。 本指南包含大量示例和实用技巧,可帮助您创建一个视觉效果惊人且用户友好的网站。



图像是网页设计师和开发人员的强大工具,它们可用于传达信息、表达情感并使网站更具视觉吸引力。 HTML 图像概念是网页设计和开发的重要方面。 它们用于将图像嵌入到网页中,以便于显示和共享图片和图形。 在这篇博文中,我们将探讨 HTML 图像的不同概念以及如何有效地使用它们。

首先,让我们谈谈不同类型的 HTML 图像。 有两种主要类型的图像:内嵌图像和背景图像。 内联图像直接嵌入到 HTML 代码中,而背景图像则应用于元素的背景。

1 | 内联图像



在此示例中,内联图像“image.jpg”直接嵌入到 HTML 代码中并显示给用户。

2 | 背景图片


在此示例中,背景图像“image.jpg”应用于 div 元素的背景并显示给用户。

3 | 替代 (alt) 文本

以合乎逻辑且一致的方式使用图像也很重要。 这意味着您应该使用它们来传达与网页内容相关的信息或表达情感,而不是随意使用它们。 此外,使用 alt 属性为图像添加文本替代也很重要,它允许可能使用屏幕阅读器的用户访问图像,或者以防图像加载失败。


在此示例中,替代文本“日落的美丽图像”让用户清楚地了解图像所代表的内容。

4 | 调整图像大小

另一个 HTML 图像概念是使用宽度和高度属性调整图像大小的能力。 这些属性允许您调整图像大小以适合您的布局和设计。


在此示例中,图像的宽度设置为 300 像素,图像的高度设置为 200 像素。

结论

HTML 图像概念是网页设计和开发的重要方面。 它们用于将图像嵌入到网页中,以便于显示和共享图片和图形。 通过了解不同类型的图像并正确使用它们,您可以为您的网站增加额外的视觉吸引力,并以有力的方式传达信息或表达情感。 无论是使用内联图片还是背景图片,添加替代文本或调整大小,这些概念都是创建视觉效果惊人且用户友好的网站的关键。

但不要只相信我们的话,您自己试试吧! 尝试使用 HTML 图像,看看它们如何增强您网站的整体外观。 通过每一行代码,您离创建一个您的访问者会喜欢的美观且引人入胜的网站又近了一步。 请记住,图像具有唤起情感和传达信息的力量,因此请明智地使用它们并将它们作为您网页设计策略的重要组成部分。 通过正确组合 HTML 和图像,您将创建一个脱颖而出并给访问者留下持久印象的网站。