div title样式_CSS背景样式

最新推荐文章于 2022-07-29 10:41:16 发布
最新推荐文章于 2022-07-29 10:41:16 发布
阅读量2.2k 收藏
点赞数
文章标签： div title样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34058060/article/details/113057269
版权

cc3222b96b2daa028eb18d20a944d6ee.png

    背景样式包括两个方面：一个是“背景颜色”，另外一个是“背景图片”。

    CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”往往涉及以下列表属性。

属性说明
background-image背景图片地址
background-repeat背景图片横向、纵向重复
background-position背景图片位置
background-attachment背景图片固定

下面我们一起看看这些属性

background-color

    颜色值有两种，一种是“关键字”，另外一种是“十六进制RGB值”。    

    注意：color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”。 

background-image

     在给元素的背景设置图片时候，需要为容器设置宽高。并且宽高要与背景图片宽高相同。否则就是下面例子 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>背景图片title>

        <style type="text/css">

            div{

                width: 200px;

                height: 200px;

                background-image: url("E:/安妮海瑟薇.jpg");

            }

        style>

    head>

    <body>

        <div>div>

    body>

html>

038799cacb1a8812be5b52a981876ae9.png

这就导致了背景图片不能完全显示。

    背景图片与图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。 

background-repeat

    使用background-repeat属性来定义背景图片的重复方式。

    background-repeat属性取值有4个，如下表

属性值说明
repeat在水平方向和垂直方向上同时平铺
repeat-x只在水平方向平铺
repeat-y只在垂直方向平铺
no-repeat不平铺

下面看一个例子

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>背景图片重复title>

        <style type="text/css">

            div{

                width: 100px;

                height: 100px;

                border: 1px solid silver;

                background-image: url("E:/king.png");

            }

            .div1{background-repeat: repeat;}

            .div2{background-repeat: repeat-x;}

            .div3{background-repeat: repeat-y;}

            .div4{background-repeat: no-repeat;}

        style>

    head>

    <body>

        <div class="div1">div>

        <div class="div2">div>

        <div class="div3">div>

        <div class="div4">div>

    body>

html>

3b53310cd922b22f0fa532e08063a54b.png

    注意：元素的宽度和高度必须大于背景图片的宽度和高度，这样才会有重复效果。  

background-position

    使用background-position属性来定义背景图片的位置。

    background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”。

像素值

    当取像素值时候，要同时设置水平方向和垂直方向的数值。  

    例如“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>背景图片位置title>

        <style type="text/css">

            div{

                width: 300px;

                height: 200px;

                border: 1px solid silver;

                background-image: url("E:/lion.png");

                background-repeat: no-repeat;

                background-position: 20px 20px;

            }

        style>

    head>

    <body>

        <div>div>

    body>

html>

51906b3fb95123593c1f4ad7a42aee9a.png

background-position属性设置的两个值是相对该元素的左上角来的。

关键字

    background-position属性的关键字取值如下表

属性值说明
top left左上
top center靠上居中
top right右上
left center靠左居中
center center正中
right center靠右居中
bottom left左下
bottom center靠下居中
bottom right右下

这些关键字效果如下图

b8e23df678c336ef52cf159c526a9c3b.png

实例如下 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>背景图片位置title>

        <style type="text/css">

            div{

                width: 300px;

                height: 200px;

                border: 1px solid silver;

                background-image: url("E:/lion.png");

                background-repeat: no-repeat;

                background-position: center right;

            }

        style>

    head>

    <body>

        <div>div>

    body>

html>

101c11f96379c0107afc69a493649f2c.png

background-attachment

    使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。

    background-attachment属性取值只有2个，如下表

属性值说明
scroll随元素一起滚动
fixed固定不动

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>背景图片固定title>

        <style type="text/css">

            div{

                width: 200px;

                height: 1200px;

                border: 1px solid silver;

                background-image: url("E:/lion.png");

                background-repeat: no-repeat;

                background-attachment: fixed;

            }

        style>

    head>

    <body>

        <div>div>

    body>

html>

结果如下图

1e4f5d4eb99e2a721eaef7b835d214b2.png

可以看出，右边的滑板都到中间了，但是顶部的图片也相对在顶部。

本节主要学习了背景样式，最后对其总结。

  • 背景颜色：background-color

  • 背景图片：background-image

  • 背景图片重复：background-repeat

  • 背景图片位置：background-position

  • 背景图片固定：background-attachment

名厨之家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV形式的title
11-20
DIV形式的title,你只要引用进来那个JS就可以了,页面只要写上你的title就可以了,<a href="http://hi.baidu.com/huqing7002" title="我的百度空间哈````">我的BLOG</a> 你只需要像这样写就可以了!
css 背景效果_CSS背景样式
weixin_39889788的博客
11-20 247
背景样式包括两个方面：一个是“背景颜色”，另外一个是“背景图片”。 CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”往往涉及以下列表属性。属性说明background-image背景图片地址background-repeat背景图片横向、纵向重复background-position背景图片位置background-attachme...
【超实用】又不花里胡哨的鼠标滑过样式
CodeDoge的博客
10-12 227
【超实用】又不花里胡哨的鼠标滑过样式 来源 | juejin.im/post/6881429197542785031 作者@kuangyaoqian 一、纯图片的DIV html代码（以下效果皆围绕这个代码展开） <div class="lists"> <a href="#" class="box"> <img src="avatar.jpg"> </a> <a href="#" class="box">
html中div title标记,DIV CSS布局基础：HTML标记(五)
weixin_42349978的博客
06-20 348
本站将陆续推出一些关于HTML标记的文章！ 这些所介绍的HTML标记不一定完全符合XHTML规范。各位在实际布局时应有所取舍，如：B标记，FONT标记，都是不符合XHTML规范的。在此不在一一罗列，相关知识请参考dedecms.com的其它文章。 81-------------------------本站将陆续推出一些关于HTML标记的文章！这些所介绍的HTML标记不一定完全符合XHTML规范。各...
CSS实现的div悬浮框并且兼容IE6的样式
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <title>CSS固定定位</title> <style type=”text/css”>
div+css样式自制带小三角的tooltips效果
12-13
代码和效果图如下： <!...<... <head>...meta charset="utf-8" />...title>...style type="text/css"> .tooltips { position: relative; width: 300px; height: 80px; line-height: 60px;
IE6 div最小高度去除方法以及IE6div垂直居中css样式
12-13
div最小高度去除办法：IE6中，使用CSS定义DIV的高度的时候经常遇到这个问题，就是当DIV的最小高度小于一定的值以后，就会发现，无论你怎么设置最小高度，Div的高度会固定在一个值不再发生变动，这个问题很是烦人。...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
前言 有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。...<div>我想拥有100%高度，我可以随意任浏览器缩放。</d
BootStrap CSS全局样式和表格样式源码解析
12-29
CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签，class等于这2个中的...
表单标签的title属性加样式（如动态生成时加换行、标红等）
08-05
NULL 博文链接：https://lk617238688.iteye.com/blog/2056016
js操作div仿title提示信息效果,增强型title信息提示
lilt085163的专栏
09-19 647
<br /><html> <head> <mce:style type="text/css"><!-- .xstooltip { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px; }
vue 给div增加title属性
热门推荐
qq_42949209的博客
01-29 1万+
在很多时候，我们页面上其实有时候展示不出来很多很多文字的，这个时候我们就不得不对这个文字进行处理，但是我们鼠标放到文字上时，还想展示所有的文字，这种方式其实有2种 第一种是运用element ui的一个组件Tooltip 文字提示，常常用于鼠标hover时的提示信息 话不多说上代码 <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top"> <el-button>上边&
div标签里的title属性鼠标定位时title属性的内容自动展示
world_the_begin的博客
12-10 2582
<div title="测试标题"> 短标题 </div> 效果：
div 属性 DIV标签属性有什么如何设置属性
qq_41446775的博客
09-19 6462
div 属性介绍，对DIV可加属性有哪些，DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性，同时通过div各属性小实例，让大家认识各属性并掌握属性。 div标签内常用属性列表 1、style 设置css样式(扩展了解style标签) 2、align 设置div盒子内的内容居中、居左、居右 3、id 引人外部对应#（井号）选择符号样式 4、class 引人外部对应.（...
自定义html标签中 title的样式---转载
逆风优雅的博客
07-29 1743
代码】自定义html标签中title的样式---转载。
Div形式的title显示JS代码
TomHu的专栏
12-24 1165
这个其实并不是原创，是从别人网站上扒下来的哈·····感觉很漂亮，所以就·····呵 ····把这个JS加到你的项目中·····var pltsPop=null;var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 var
使用css伪元素，模拟html中的title属性
suwyer的博客
11-17 9806
在html中， title属性的作用是显示额外的信息，当鼠标移动到元素上时，这些提示信息就会显示出来。然后，title属性的缺点也很明显，一是原始样式太丑，一是鼠标移动到元素上之后，需要等待一段时间才会显示；因此，我们可以使用伪类来解决这两个问题。 实现步骤： 一、首先html布局 &lt;div title="使用css伪类模拟title属性"&gt;title属性&lt;/div&gt...
在html中如何让div转换颜色,如何更改HTML中的工具提示（div的标题）背景颜色
weixin_33700809的博客
05-30 509
你不能风格默认提示，但你可以使用data-attributes与使用content:attr(data-attribute);.tooltip{padding:20px 0;}.tooltip div {font: 10px sans-serif;background-color: blue;text-align: right;padding: 3px;margin: 1px;color: whi...
修改div的title属性的样式
最新发布
05-30
要修改 div 元素的 title 属性的样式，您可以使用 CSS :before 或 :after 伪元素来实现。以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <style> /* 修改 div 的 title 样式 */ .my-div:before { content: attr(title); font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #999; text-transform: uppercase; letter-spacing: 1px; } </style> </head> <body> <div class="my-div" title="This is the title">Some content goes here...</div> </body> </html> ``` 在上面的示例中，我们使用 CSS :before 伪元素来为 div 元素的 title 属性添加样式。我们设置了 content 属性为 title 属性的值，然后为其设置了字体、字号、颜色、文本转换和字母间距等样式属性。这样就可以修改 div 的 title 属性的样式了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值