css图像seo优化

css图像

news/2024/10/14 13:23:21

1.利用width,height属性控制图像的大小。
<!DOCTYPE html>
<html><head><title>Image Sizes</title><style type="text/css">img.large {width: 500px;height: 500px;}img.medium {width: 250px;height: 250px;}img.small {width: 100px;height: 100px;}</style></head><body><img src="images/magnolia-large.jpg" class="large" alt="Magnolia" /><img src="images/magnolia-medium.jpg" class="medium" alt="Magnolia" /><img src="images/magnolia-small.jpg" class="small" alt="Magnolia" /></body>
</html>
2.使用CSS将图像对齐
（1）使用float对齐图像。将float属性添加到用于控制图像大小的类中
（2）创建类，比如align-left align-right
<!DOCTYPE html>
<html><head><title>Aligning Images</title><style type="text/css">body {font-family: Georgia, "Times New Roman", serif;color: #665544;}img.align-left	{float: left;margin-right: 10px;}img.align-right	{float: right;margin-left: 10px;}img.medium {width: 250px;height: 250px;}</style></head><body><p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p><p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-right medium" />Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p></body>
</html>
3.使用CSS将图像居中
图像是内联元素，将其转换为块元素再使用auto属性居中
<!DOCTYPE html>
<html><head><title>Centering Images</title><style type="text/css">body {font-family: Georgia, "Times New Roman", serif;color: #665544;}img.align-center {display: block;margin: 0px auto;}img.medium {width: 250px;height: 250px;}</style></head><body><p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-center medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p></body>
</html>
4.背景图像background-image
背景图像是页面中最后加载的事物。
<!DOCTYPE html>
<html><head><title>Background Image (Body)</title><style type="text/css">body {background-image: url("images/pattern.gif");color: white;padding: 20px;}</style></head><body><h1>Planting Guide</h1><h2>Magnolia</h2><p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p><h2>Ranunculus</h2><p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p><h2>Tulip</h2><p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p></body>
</html>
5.重复图像
background_repeat:
repeat :x-y都重复
repeat-x:水平重复
repeat-y:垂直重复
repeat no-repeat只显示一次
background-attachment:
fixed 背景图像固定在页面中的一个位置
scroll背景图像随用户页面上下滚动
<!DOCTYPE html>
<html><head><title>Background Repeat</title><style type="text/css">body {background-image: url("images/header.gif");background-repeat: repeat-x;color: #665544;padding: 20px;}h1 {color: white;}</style></head><body><h1>Planting Guide</h1><h2>Magnolia</h2><p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p><h2>Ranunculus</h2><p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p><h2>Tulip</h2><p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p></body>
</html><head><title>Background Attachment</title><style type="text/css">body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-attachment: fixed;color: #665544;padding: 20px;}</style></head>6.背景图像定位
background-position:
关键字left center top bottom right组合
使用百分数：0% 0%左上角 50% 50%居中
<!DOCTYPE html>
<html><head><title>Background Position</title><style type="text/css">body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-position: center top;color: #665544;padding: 20px;}</style></head><body><h1>Planting Guide</h1><h2>Magnolia</h2><p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p><h2>Ranunculus</h2><p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p><h2>Tulip</h2><p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！

AvaloniaTCP-v1.0.0：学习使用Avalonia/C#进行TCP通讯的一个简单Demo

AvaloniaTCP-v1.0.0：学习使用Avalonia/C#进行TCP通讯的一个简单Demo。TCP通讯简介 TCP（传输控制协议，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议。它确保数据包按顺序传输，并在必要时进行重传，以保证数据的完整性和准确性。TC…

【CTF】CTF-OS：一个专门为CTF设计的操作系统

前言 CTF-OS是探姬为CTF比赛特制的虚拟机，封装多版本工具集与系统，适合CTF新手、各行业人士及安全工作者使用，尤其适合不愿在工作机安装特殊软件的用户。注意，CTF不同于渗透测试，本虚拟机专为CTF赛事人员定制。如果你也想学习CTF那么我特意准备好了一封CTF学习资料2000页…

【日记】包装好看度与配料表健康度成反比（1550 字）

正文昨天才上完班，怎么明天又要上班啊……今天起床头发好炸，就像哪个山洞里刚出来的野人。昨晚明明吹了头发的啊，我看着镜子里的自己有些哭笑不得。报复性熬夜玩到了 3 点。今天 11:30 起床，感觉眼睛还是很肿，没睡好。可能就是因为太晚了。中午又睡了个午觉，起床感觉眼睛…

程序员开发利器：Your Commands网站上线

各种命令行工具是我们IT行业日常工作离不开的，但是对于命令行工具的使用有一个痛点：文档上每一个命令行参数写的清清楚楚，但是怎么组合起来用却搞不清楚。所以为了解决这个问题每个人都应该有一个记事本，记录下来自己常用的完整命令行，每次用的时候翻出来直接用就可以。但…

Stable diffusion语法

进阶语法： 1、下划线 “—” 用下划线连接两个单词，表达是一体，是融合的意思，比如：a plate of coffee cake, 这里的咖啡和蛋糕，在生成就是两个独立体，用下滑线连在一起就是咖啡色的蛋糕 a plate of coffee_cake→ 2、控制提示词的生效时间 2.1 [提示词：0-7数值] FORES…

TowardsDataScience-博客中文翻译-2020-九十-

TowardsDataScience 博客中文翻译 2020（九十）原文：TowardsDataScience Blog 协议：CC BY-NC-SA 4.0Python 中的打包:工具和格式原文：https://towardsdatascience.com/packaging-in-python-tools-and-formats-743ead5f39ee?source=collection_archive---------5-----------…

jmeter 参数化 csv插件的读取文件 bin目录

问题： ${__P(user.dir,)}${__P(file.separator,)}

TowardsDataScience-博客中文翻译-2019-四十一-

TowardsDataScience 博客中文翻译 2019（四十一）原文：TowardsDataScience Blog 协议：CC BY-NC-SA 4.0机器学习中的核心秘密。一原文：https://towardsdatascience.com/kernel-secrets-in-machine-learning-2aab4c8a295f?source=collection_archive---------5--------------…

css图像

相关文章