HTML--CSS--图片和背景样式

这篇具有很好参考价值的文章主要介绍了HTML--CSS--图片和背景样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

图片样式

图片大小

最基本的应该就是对大小的管理

width:像素值; 宽度
height:像素值; 高度

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="小猫.jpg">
</body>
</html>

图片边框

一样使用border进行定义

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
            border: 5px blue solid;
        }
    </style>
</head>
<body>
    <img src="小猫.jpg">
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

图片对齐

图片对齐和文本的对齐是一样的,也是用 text-align进行,但需要注意不能直接在 img定义,需要在父元素处定义
属性依然是:

left 左对齐
center 居中
right 右对齐

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*放在这里是不生效的*/
            text-align: right;
        }
        /*需要单独定义,在父元素中才能生效*/
        .myimg {text-align: center;}
    </style>
</head>
<body>
    <div class="myimg">
        <img src="小猫.jpg">
    </div>
    <img src="小猫.jpg">
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

垂直对齐

用法:vertical-align:取值;
属性:

top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐

例子:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }
        #a{vertical-align: top;}
        #b{vertical-align: middle;}
        #c{vertical-align: bottom;}
        #d{vertical-align: baseline;}        
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <img id="b" src="小猫.jpg">
    <img id="c" src="小猫.jpg">
    <img id="d" src="小猫.jpg">
</body>
</html>

效果:
emm~~~貌似看起来就是这样,暂时想不到这个实际运用起来的时候的作用
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

文字环绕 float

属性:

left 元素向左浮动
right 元素向右浮动

例子:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*float: left;*/
        } 
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型</p>
</body>
</html>

这时候,网页效果是:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端
当设定了文字环绕后

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            float: left;
        } 
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型</p>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端
emm~~~~~~
那我这样写可以吗?

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }

    </style>
</head>
<body>
    <p>这算是手动的<img id="a" src="小猫.jpg">文字环绕型吗?</p>
    <p>怎么算是文字环绕型</p>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端
貌似也可以,强行把它夹在文字中间…

背景样式

属性:

background-image: url(); 图片背景
background-color: 颜色; 颜色背景
background-repeat: 属性; 背景图片如何重复铺陈
background-position: 值; 定义背景图片位置
background-attachment: fixed; 固定背景图片,使其不动

背景图片:

用法的话,放到div或父类内
值得注意的是,它不是直接把图片全显示在网页上,而是你网页有多大,他就铺多少,见下列代码和效果
#a{background-image: url(小猫.jpg);}

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a{background-image: url(小猫.jpg);}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

背景颜色:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a{background-color: aqua;}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

背景图片重复

属性:

repeat 在水平方向和垂直方向上同时平铺(默认值)
repeat-x 只在水平方向上平铺
repeat-y 只在垂直方向上平铺
no-repeat 不平铺

如下例子:
定义了div的格式,背景图片
然后定义父类平铺

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            background-image: url(x.gif);
        }

        #a{background-repeat: repeat;}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

背景图片位置

用法:
background-position: 水平距离像素 垂直距离像素; 这里的距离指到网页左边界和上边界的距离
也可以用关键字,对应关系如下
其实就是几个关键字组合来定义位置,上下左右中
top 上
center 中
right 右
bottom 下
left 左
用的时候,关键字可以两两组合
如 right bottom 就代表右下

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-position: 50px 50px;
            background-image: url(x.gif);
            background-repeat: no-repeat;
        }
        /* #a{background-repeat: no-repeat;} */
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果:
HTML--CSS--图片和背景样式,HTML学习,html,css,前端

背景图片固定

用法:
background-attachment: fixed; 这样就是让背景图片固定在一处,网页滚动不随着变化,一般应该用不到
background-attachment: scroll; 随元素滚动,这个是默认的,所以这个应该基本用不到文章来源地址https://www.toymoban.com/news/detail-802225.html

到了这里,关于HTML--CSS--图片和背景样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端:运用html+css+js模仿京东上商品图片区域放大特效

    1. 前言 最近在网页端浏览京东上的商品时,觉得上面的那张gif图片上实现的特效不错,于是自己打算使用html+css+js技术来实现一下上述特效效果,我的实效果如下: 2. 前端界面 主要使用到浮动、绝对定位、相对定位等知识,不了解这部分知识点的读者可以先去了解了解,再

    2024年02月16日
    浏览(56)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(65)
  • 前端html中让两个或者多个div在一行显示,用style给div加上css样式

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 我们知道,默认情况下每个div都是单独一

    2024年02月14日
    浏览(60)
  • CSS样式背景图片的自适应

    今天在写一个页面的时候,需要用到一个背景图片。 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调。但是由于太久没有用到这个属性了,无可奈何又去找了一番度娘 废话不多说,上代码 1.css图片自适

    2024年02月11日
    浏览(45)
  • HTML样式CSS、图像

    HTML样式-CSS: CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。CSS可以通过以下方式添加到HTML中:1)、内联方式:在HTML元素中使用“style”属性;2)、内部样式表:在HTML文档头部head区域使用style元素来包含CSS;3)、外部引用:使用外部CSS文件。 、内联样式: p style=“co

    2024年02月06日
    浏览(82)
  • HTML/CSS设置网页背景

    目录 一、HTML设置网页背景 1.基础设置  2.背景颜色 3.背景图片 二、CSS设置网页背景 body 体中 使用 background 和 style 来设置 效果演示 通过style属性: backgroud-color :transparent   color transparent : 背景色透明       color : 指定背景颜色 颜色的表达方式有四种: ①直接写颜色单词 ②

    2023年04月22日
    浏览(51)
  • HTML--CSS--字体、文本样式

    属性 作用 font-family 字体类型 font-size 字体大小 font-weight 字体粗细 font-style 字体风格 color 字体颜色 用法: 如下,定义 div元素内的字体,默认是宋体,要设定其他字体就用这个属性进行设定,关于各字体,我用VSCode写代码时有补全,就不一一列出了 用法: 字体粗细属性:

    2024年01月17日
    浏览(67)
  • HTML+CSS实现视频背景页面

    HTML: CSS:  效果图:  video资源网站:https://mazwai.com/  参考自B站教程:12-视频背景页面_哔哩哔哩_bilibili

    2024年02月04日
    浏览(46)
  • HTML--CSS--边框、列表、表格样式

    属性: border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 取值为像素值 none 无样式 dashed 虚线 solid 实线 如示例: 为 div 设定了一个边框,虚线,宽度10像素,颜色是红色 效果: 另一写法:简写,将配置都写进 border里 ,效果是一样的 border-top

    2024年01月17日
    浏览(47)
  • 编程笔记 html5&css&js 038 CSS背景

    背景在样式当中首当其冲,一开始我就讲这背景很重要,背景过亮伤眼是一个重要问题,合理配置背景色,改善感观效果,也是网页设计的一件重要的事。CSS 背景属性用于定义元素的背景效果。 这些属性都和背景有关。 background-color background-image background-repeat background-attach

    2024年01月16日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包