首页 > 其他分享 >css图像

css图像

时间:2024-10-14 13:10:11浏览次数:8  
标签:repeat Magnolia large background 图像 flowers species css

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>

标签:repeat,Magnolia,large,background,图像,flowers,species,css
From: https://www.cnblogs.com/zhongta/p/18463916

相关文章

  • CSS 中的数学函数
    min()/max()/clamp()和calc()函数类似,任何可以使用<length>,<frequency>,<angle>,<time>,<percentage>,<number>,<integer>数据类型的地方都可以使用min()/max()/clamp()这3个数学函数。min()/max()/clamp()这3个数学函数和calc()函数是可以相互嵌套使用的,例如:width:calc(min(80......
  • QD1-P25 CSS 背景
    本节学习:CSS背景属性本节视频https://www.bilibili.com/video/BV1n64y1U7oj?p=25背景颜色​​背景图片不重复​​横向重复​​纵向重复​​双向重复​​背景图片大小400px​​600px​​原图大小​​显示器宽度不够时,显示图片的一部分​​‍‍本......
  • Web前端开发入门学习笔记之CSS 43-47 --新手超级友好版-复合选择器+css特性篇
         Foreword写在前面的话: 大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便......
  • 使用HTML和CSS实现3D波浪动画效果
    使用HTML和CSS实现3D波浪动画效果在本篇博客中,将详细介绍如何使用HTML与CSS创建一个3D波浪动画效果。这个效果不仅能够在网页中创建立体感强的视觉体验,还能够通过悬停和聚焦实现与用户的交互。我们将逐步解析代码中的每个部分,帮助你掌握其中的关键技巧。1.效果2.HTML......
  • [vue3 JavaScript CSS]实现电商网站商品预览,图片放大镜功能
    da效果预览:当鼠标浮在图片上时,灰色小框跟随鼠标运动。右侧大图显示。灰色框不会跑出图片,鼠标移动,右侧大图相应跟随移动。实现思路在实现前,我们想梳理一下我们要实现什么功能灰色框跟随鼠标移动,注意处理边界情况当鼠标进入时右侧大图出现,鼠标移出时右侧大图消失鼠标向左......
  • 图像文本对比模型实践——CLIP——2021
    图像文本对比模型实践——CLIP——20211.论文启发点详细内容(文+图)clip原理的极简版:用图像编码器把图像编码成向量a;用文本编码器把文本编码成向量b;计算a·b,如果a和b来自一对儿配对的图和文字,则让a·b向1靠近;如果a和b来自不配对儿的图和文字,则让a·b向......
  • 前端知识整理(全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试)
    currenttime在前端开发中,“currenttime”通常指的是获取用户设备的当前时间。这可以通过JavaScript来实现,下面是一个简单的示例代码,展示如何获取并显示当前时间:<!DOCTYPEhtml><html><head><title>显示当前时间</title></head><body><h1>当前时间:</h1><pid="d......
  • 第五章 CSS盒模型
    盒模型是CSS定位布局的核心内容,页面中所有的元素都是放进一个容器内的,这个容器可以看成是一个盒子。可以通过CSS来控制这些盒子的各种显示属性,把这些盒子进行定位,完成整个页面的布局。在掌握了盒子模型以及其中每个元素的用法后,才能拥有较完善的布局观。5.1盒模型的定义web......
  • 使用 OCaml 进行基础图像识别
    OCaml是一门强类型的函数式编程语言,以其高效的编译器和灵活的表达能力著称。虽然OCaml不像Python等语言在图像处理和识别领域被广泛应用,但它的模块化特性和强大的标准库使其能够完成相关任务。本文将介绍如何在OCaml中实现基础图像处理和识别。OCaml的优势OCaml拥有静......
  • 使用 Lua 进行基础图像识别
    Lua是一门轻量级的嵌入式编程语言,常用于游戏开发、嵌入式系统和快速原型设计。虽然Lua并不像Python那样有大量用于图像处理的库,但借助扩展库和C语言接口,Lua也能用于实现基础的图像识别任务。本文将介绍如何使用Lua实现图像识别中的基本步骤,包括图像加载、灰度转换和简......