文章 合集 资源 图书 工具 捐赠

图片、背景与渐变色

本文介绍在页面中如何添加图片、设置元素背景、设置元素的圆角和阴影效果、创建渐变色图像等。

图片

页面代码由文本内容构成，图片、音频、视频等对象都有专用的元素指定插入的位置和设置参数，并可以应用CSS样式。

在页面中插入图片需要使用img元素，<img>标记常用的属性有：

  • alt，设置文本信息，当图片文件无法下载时会显示此信息。
  • src，设置图片文件的位置，可以使用本地的相对路径或绝对路径，也可以使用网络地址。
  • border，设置图片的边框尺寸，直接使用数值，单位为像素。
  • align，指定图片与相邻元素的对齐方式，属性值包括top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）、left（左对齐）和right（右对齐）等。

一般来讲，元素样式的设置可以由CSS属性完成，实际应用中可以根据需要选择合适的方式。下面的代码演示了img元素的基本应用。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<img alt="地月" src="earth-moon.jpg" style="width:100%;" />
</body>
</html>

本例需要在页面文件相同目录下准备earth-moon.jpg图片，也可以根据实际情况指定图片的位置。代码中还使用style属性设置图片宽度为100%，此时，无论如何缩放浏览器，图片都可以在水平方向满页显示。这里，可以输入一个错误的图片文件名或位置，并观察alt属性的应用效果。

使用图片时，如果需要保持图片的宽、高比，一般只设置宽度或只设置高度，页面中会自动缩放并保持宽高比；如果需要同时指定图片的宽度和高度，则需要在原始图片上使用对应的宽高比，否则在页面中显示的图片就会比例失真，从而影响浏览效果。

下面的代码，我们来看图片与文字的对齐效果。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>
        <img alt="地月" src="earth-moon.jpg" align="left" style="width:320px;margin:0.5em;" />
        地球（Earth）是太阳系的第三颗行星，从内到外分别是地核（又分为外
地核和内地核，其中外地核产生地磁场）、地幔、地壳，表面陆地面积约占29.2%
为，海洋等面积占70.8%。地球大约诞生于45.4亿年前，42亿年前形成海洋，40亿
年前形成稳定固态地壳。约35亿年前生命在深海出现，逐步扩散到浅海和陆地，当
前已记录的物种约120万种。地球绕太阳公转一周需365.25天，自转轴倾斜产生季
节变化。半径约6371千米。地球唯一的天然卫星是月球，两者的引力相互作用引起
潮汐并稳定地球自转。
    </p>
</body>
</html>

本例，图片会在文本的左侧，页面显示效果如下图所示。

图片与文本

圆角

设置页面元素的圆角效果时可以使用CSS样式的border-radius属性，属性值设置基本用法包括：

  • 一个参数，同时设置四个角的半径。
  • 两个参数，设置左上角和右上角，右下角半径与左上角相同，左下角半径与右上角相同。
  • 三个参数，设置左上角、右上角、右下角半径，左下角与右上角半径相同。
  • 四个参数，设置左上角、右上角、右下角和左下角半径。

此外，分别设置四个角的半径时可以使用如下属性：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

下面的代码，可以将一个区域显示为胶囊形状。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #capsule {
            background-color: steelblue;
            width: 128px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
            border-radius: 25px;
        }
    </style>
</head>
<body>
<div id="capsule">
    胶囊形状
</div>
</body>
</html>

本例，通过将四个的半径都设置元素高度的一半，即可显示为两端为半圆形的胶囊形状，效果如下图所示。

胶囊形状

如果元素原始形状为正方形，将四个角的半径都设置为50%，则元素可以显示为圆形。如下面的代码。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #circle {
            background-color: steelblue;
            width: 128px;
            height: 128px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="circle">
</div>
</body>
</html>

元素显示效果如下图所示。

使用圆角生成圆形

阴影

设置元素的阴影效果可以使用box-shadow属性，属性值的设置顺序为阴影效果、水平方向偏移尺寸、垂直方向偏移尺寸、模糊半径尺寸、发散尺寸和颜色，其中：

  • 阴影效果，可省略。默认为outside，随影显示在矩形的外侧；显示内随影时使用inset值。
  • 水平方向偏移尺寸。
  • 垂直方向偏移尺寸。
  • 模糊半径尺寸。
  • 发散尺寸，可省略。
  • 颜色。

下面的代码，会在前例胶囊图形下设置一些阴影效果。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #capsule {
            background-color: steelblue;
            width: 128px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
            border-radius: 25px;
            box-shadow: 10px 10px 15px gray;
        }
    </style>
</head>
<body>
    <div id="capsule">
        胶囊形状
    </div>
</body>
</html>

页面显示效果如下图所示。

设置阴影效果

在box-shadow属性中使用逗号分隔，还可以定义多组阴影效果，下面的代码显示了相关应用。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #circle {
            margin:100px;
            background-color: steelblue;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            box-shadow:0px 0px 0px 50px orange,
                0px 0px 0px 100px red;
        }
    </style>
</head>
<body>
    <div id="circle">
    </div>
</body>
</html>

页面显示效果如下图所示。

使用阴影绘制多层圆环

背景

设置元素的背景时，可以使用background系列属性，下面分别介绍。

只使用背景色时可以使用background-color属性，默认值为transparent，表示元素背景是透明的。

设置背景图片时可以使用以下一些CSS属性。

background-image属性，设置背景图片，可以使用url()函数指定图片文件的路径，也可以使用渐变色函数生成的图像。

background-repeat，设置背景图像的重复方式，其属性值包括：

  • repeat，默认值，会在水平和垂直两个方向上重复排列图像。
  • repeat-x，只在水平方向重复排列图像。
  • repeat-y，只在垂直方向重复排列图像。
  • no-repeat，不重复图像。

background-postion，设置背景图像的定位方式，可以使用数值或百分数设置左上角位置，也可以使用left、center、right、top、bottom关键字或它们的组合设置对齐方式。

background-attachment，设置图像的附着方式，其值包括：

  • scroll，默认值，背景图像会随着页面滚动而滚动。
  • fixed，背景图像固定不动。

background属性值可以按照background-image、background-repeat、background-color、background-position、background-attachment属性值的顺序设置。此外，background属性中还可以使用多组数据设置多个背景。

先来看下面的代码。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            background-image:url(earth.jpg);
            background-position:bottom;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-color:black;
        }
        p{
            color:#fafafa;
        }
    </style>
</head>
<body>
    <p>
        地球（Earth）是太阳系的第三颗行星，从内到外分别是地核（又分为外
地核和内地核，其中外地核产生地磁场）、地幔、地壳，表面陆地面积约占29.2%
为，海洋等面积占70.8%。地球大约诞生于45.4亿年前，42亿年前形成海洋，40亿
年前形成稳定固态地壳。约35亿年前生命在深海出现，逐步扩散到浅海和陆地，当
前已记录的物种约120万种。地球绕太阳公转一周需365.25天，自转轴倾斜产生季
节变化。半径约6371千米。地球唯一的天然卫星是月球，两者的引力相互作用引起
潮汐并稳定地球自转。
    </p>
</body>
</html>

本例，首先定义与页面相同目录的图片earth.jpg为背景图片；然后定义背景图片固定在底部位置，这样，当缩放浏览器窗口时，背景会保持在页面的底部；接下来，设置图像不会重复；最后将背景颜色设置为黑色，这样，背景图片不能达到的地方会显示为黑色，这里黑色和背景图片可以完美匹配为一个整体。需要注意，由于背景为黑色，所以p元素的字体颜色设置为#fafafa，接近于白色，又不会太亮。页面显示效果如下图所示。

底部固定背景

下面的代码会同时使用两张图片作为背景。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            background: url(earth.jpg) no-repeat top fixed, 
                url(moon.jpg) repeat-x bottom fixed;
            background-color:black;
        }
        p{
            margin-top:180px;
            color:white;
        }
    </style>
</head>
<body>
    <p>
        地球（Earth）是太阳系的第三颗行星，从内到外分别是地核（又分为外
地核和内地核，其中外地核产生地磁场）、地幔、地壳，表面陆地面积约占29.2%
为，海洋等面积占70.8%。地球大约诞生于45.4亿年前，42亿年前形成海洋，40亿
年前形成稳定固态地壳。约35亿年前生命在深海出现，逐步扩散到浅海和陆地，当
前已记录的物种约120万种。地球绕太阳公转一周需365.25天，自转轴倾斜产生季
节变化。半径约6371千米。地球唯一的天然卫星是月球，两者的引力相互作用引起
潮汐并稳定地球自转。
    </p>
</body>
</html>

本例设置了两张背景图片，其中，地球（earth.jpg）图片固定在顶部，不重复；月球（moon.jpg）图片固定在底部，水平方向重复，这里需要注意，水平方向重复的图片，其左右两侧的图像应该可以吻合，这样看上去才会完美，而上下重复排列的图片则顶部和底部的图像应该可以吻合；接下来，将背景颜色设置为黑色。无论如何缩放页面，地球图片都会在顶部显示，月球图片都会在底部显示，两张图片之间的背景区域会显示为黑色。最后，将p元素上边距设置为180像素，段落文字会显示在地球的下方。页面显示效果如下图所示。

背景使用两张图片

渐变色

CSS样式设置中，可以使用linear-gradient()函数创建渐变色图像，如果只指定两个参数，则参数一为开始颜色，参数二为结束颜色；默认为从上到下渐变，需要修改渐变方向时在颜色参数前使用to短语参数设置结束位置，如默认值为to bottom，表示从上到下；to top表示从下到上渐变；to bottom right表示从左上角到右下角等。下面的代码演示了从左上角到右下角渐变色，形状为胶囊形的图案。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #capsule {
            background-image:linear-gradient(to bottom right,#fafafa,darkorange);
            width: 128px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
            border-radius: 25px;
            color:navy;
        }
    </style>
</head>
<body>
<div id="capsule">渐变胶囊</div>
</body>
</html>

页面显示效果如下图所示。

渐变胶囊

linear-gradient()函数中还可以设置多个颜色，其中，第一个和最后一个颜色直接使用颜色值，中间的每一个颜色需要设置颜色值和此渐变部分所占的比例，如red 30%。下面的代码演示了多种颜色渐变的应用。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #linear1 {
            background-image: linear-gradient(white,red 30%,yellow 55%,blue);
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="linear1"></div>
</body>
</html>

页面显示效果如下图所示。

多颜色线性渐变

另一种渐变方式为放射性渐变，使用radial-gradient()函数创建，其参数一使用如下关键字构建放射参数，设置如下：

  • 设置放射区域的基本形状，如circle（圆形）、ellipse(椭圆)、
  • 渐变的结束位置，如closest-side（最近边界）、farthest-side（最远边界）、closest-corner（最近角）、farthest-corner（最远角）。
  • 中心坐标，使用at关键字定义，可以使用方位关键字或者水平与垂直坐标值，如中心可以使用at center或at 50% 50%。

radial-gradient()函数的第二和第三个参数设置渐变的开始颜色和结束颜色。下面的代码演示了圆形的放射性渐变。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #radial {
            background-image: radial-gradient(circle farthest-corner at center,white,blue);
            width: 200px;
            height: 200px;
            border-radius:100px;
        }
    </style>
</head>
<body>
<div id="radial"></div>
</body>
</html>

页面显示效果如下图所示。

放射性渐变（圆形）

repeating-linear-gradient()函数，创建循环线性渐变图像，在最后一个渐变颜色参数后指定渐变区域尺寸，大于此尺寸会循环应用渐变色。下面的代码演示了repeating-linear-gradient()函数的应用。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #linear {
            background-image:repeating-linear-gradient(#fafafa,red 100px);
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="linear"></div>
</body>
</html>

页面显示效果如下图所示。

循环线性渐变

repeating-radial-gradient()函数，创建循环放射性渐变图像，在最后一个渐变色参数后指定渐变区域尺寸，大于此尺寸会循环应用渐变色。下面的代码演示了使用三种颜色的放射性渐变重复。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #radial {
            background-image: repeating-radial-gradient(circle farthest-side at center,#fafafa,steelblue 30%,#fafafa 100px);
            width: 300px;
            height: 300px;
            border-radius:150px;
        }
    </style>
</head>
<body>
<div id="radial"></div>
</body>
</html>

页面显示效果如下图所示。

重复放射性渐变图形

豫ICP备11002860-1

公安机关备案41152102000002号

http://caohuayu.com    本网站及微信公众号内容均为原创，转载请注明出处