HTML图像、背景、颜色
HTML 图像
图像标签<img;>: 空标签,只包含属性,没有闭合标签
源属性<Src;>:图像的URL地址
<img src="url />
替换文本属性<Alt>: 为图像定义一串预备的可替换的文本。值是用户定义的。
<img src="boat.gif" alt="Big Boat">
实例1. 背景图像
<html>
<body background="/i/eg_background.jpg">
</body>
</html>
实例2. 排列图片
<html>
<body>
<h2>Without align:</h2>
<p>Image <img src="/i/eg_cute.gif"> in the text</p><h2> With align: </h2>
<p>Image <img src="/i/eg_cute.gif" align="bottom"> in the text</p>
<p>Image <img src="/i/eg_cute.gif" align="middle"> in the text</p>
<p>Image <img src="/i/eg_cute.gif" align="top"> in the text</p>
<p>bottom是默认的对齐方式</p></body>
</html>
实例3. 浮动图像
<p>
<img src="/i/eg_cute.gif" align="left">
带有图像的一个段落。图像的align属性设置为"left", 图像将浮动到文本的左侧
</p><p>
<img src="/i/eg_cute.gif" align="right">
...右侧
</p>
实例4. 调整图像的尺寸
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
实例5. 制作图像链接
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
实例6. 创建图像映射
<p>请点击图像上的星球,把它们放大。</p><img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" /><map name="planetmap" id="planetmap"><area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" /><area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" /><area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" /></map><p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
实例7. 把图像转换为图像映射
<p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化</p>
<p>
<a href="/examp/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</p>
HTML 背景
- <body bgcolor="#000000">
- <body bgcolor="rgb(0,0,0)">
- <body bgcolor="black">
- <body background="clouds.gif"> (相对地址)
- <body backgroudn="http://www.w3school.com.cn/clouds.gif">(绝对地址)
- 使用背景图片时注意
- 图像文件不应超过10k
- 背景图片是否与页面中的其他图像搭配良好
- 是否与文字颜色搭配良好
- 平铺后看上去怎样
- 对文字的注意力被背景图像喧宾夺主了吗?
<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。
HTML 颜色
Color | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
大多数的浏览器都支持颜色名集合。
提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值。
Color | Color HEX | Color Name |
---|---|---|
#F0F8FF | AliceBlue | |
#FAEBD7 | AntiqueWhite | |
#7FFFD4 | Aquamarine | |
#000000 | Black | |
#0000FF | Blue | |
#8A2BE2 | BlueViolet | |
#A52A2A | Brown |
数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。
我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。
216 跨平台色
最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。
HTML图像、背景、颜色相关推荐
- 批量更改图像背景颜色_Photoshop 2021来了,图像处理新功能让人惊叹
Adobe公司宣布推出Photoshop 2021,这是最受大家欢迎的用于处理栅格图形的程序的最新版本(也称为 V22.0),Adobe Photoshop 2021是用于处理栅格图形的程序的新版本, ...
- 批量更改图像背景颜色_Retrobatch for mac(图像批量设计工具)
想要批量设计图像吗?Retrobatch mac版是一款图像批量设计工具,可以修改图片的大小尺寸.格式以及颜色,并且你还能够为这些图片批量加上自己的水印效果.这样就可以避免图片被其他人盗用了. Ret ...
- matlab plot函数蓝色,matlab 填充某一段plot图像背景颜色,而不是全部都是蓝色
满意答案 lm133 2018.05.05 采纳率:46% 等级:12 已帮助:16495人 使用fill函数,具体的方法是: fill(x,y,c). 其中区域是使用x和y来指定,c来指定颜色 ...
- OpenCV图像旋转,指定填充背景颜色边界颜色
OpenCV图像旋转,指定填充背景颜色边界颜色 OpenCV与图像旋转有关的函数: (1)warpAffine函数 void cv::warpAffine ( InputArray src, ...
- python改背景颜色_Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
!!!本博客,是对图像的背景颜色的修改的基础讲解~!!! 还包括一个练习--是对背景色修改的一点应用尝试!!!--始终相信学习多一点探索,脚步会更坚定一些~ 愿所有正在努力的人都可以坚持自己的路一直走 ...
- css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法(学习笔记)
一.设置背景颜色 在CSS当中,网页元素的背景颜色使用background-color属性来设置,和文本颜色的用法类似. 用法 <style>h2{color:red;backround- ...
- CSS控制背景颜色和背景图像的方法
Web前端培训中比较重要的一环是网页的设计,网页能通过背景图像给人留下第一印象,如节日题材的网站一般采用喜庆祥和的图片来突出效果,所以在网页设计中,控制背景颜色和背景图像是一个很重要的步骤.下面将详细 ...
- 完美免费在线去背景图片,便捷变速。在5秒内消除或者替换图像背景,智能调整颜色,所有操作都在浏览器完成,无需上传图像 - BgSub
相信很多小伙伴都有去图片背景图片的需求,有时候不想打开PS,又不想麻烦美工,还是自己来吧. 今天推荐的这个网站是 bgsub,它是基于机器学习的图像修复方法,自动去除图片背景. 功能 完全自动化,免费 ...
- Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色(末尾有一个小训练——是将所学得的图像颜色修改应用为画板一般的刷新)
文章目录 愿所有正在努力的人都可以坚持自己的路一直走下去! 实现轨迹(跟踪)栏功能的函数 函数主要参数讲解 代码实现 我们先创建一个窗体,为轨迹(跟踪)栏的挂载做准备 接着我们把需要的轨迹(跟踪)栏添 ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
最新文章
- 大型网站采用什么系统架构保证性能稳定性
- leetcode C++ 46. 全排列 给定一个 没有重复 数字的序列,返回其所有可能的全排列。
- S/4HANA里通过key user tool将Extension field添加到UI上的技术实现
- 可爱的穆里尼奥,可爱的切尔西!
- (acm)C++加速输入的几种方法
- Redis桌面客户端 Redis Studio
- oracle创建登录用户有限制吗,Oracle创建用户限制文件,表空间用户授权等。
- 计算机二级 java和web_2016计算机二级web程序设计判断题及答案
- spring-session实现分布式集群session的共享(转)
- 使用eclipse新建一个SWT工程
- 英语测试听力材料软件,英语听力软件哪个好?来这里!
- 第4章 Function语义学
- 俄罗斯计划推出数字卢布 逐年解锁推进?国际货币金融体系迈入数字化变革
- 生产排产软件中MTO模式的优缺点
- PS 剪切图片到指定大小
- VMware收购Wavefront增强云管理产品组合
- 使用Cookies登录网站--登录豆瓣网站
- 华为软交换从容应对HAJJ麦加朝圣话务高峰
- 系统集成项目管理工程师教程考点精讲之风险的分类
- Q-learning 学习心得