首页 > 其他分享 >css-背景

css-背景

时间:2023-04-19 10:13:06浏览次数:48  
标签:平铺 repeat 颜色 color 背景 background 图像 css

1、背景颜色

background-color:red;
background-color:#b0c4df;
background-color:rgb(255,0,0);

2、背景图像

background-img:url('bg.jpg');
  • 默认情况,图像进行平铺以覆盖整个元素
background-repeat:repeat-x;
background-repeat:no-repeat;
  • background-repeat可以指定平铺的方式,一般以水平会更好
  • 有时设置不平铺,以使图像不影响文本的排版
background-position:right top;
  • 不平铺时,可以对图像进行定位

3、简写

background:#ffffff url('img_tree.png') no-repeat right top;}
background:color image repeat attachment position
  • 需要按顺序设置,可以省略不需要设置的项

标签:平铺,repeat,颜色,color,背景,background,图像,css
From: https://www.cnblogs.com/wd404/p/17332283.html

相关文章

  • css字体
    1、font-family字体系列font-family:"TimesNewRoman",Times,serif;应该设置多个,以作为后备机制,如果浏览器不支持第一种字体,他将尝试下一种字体。字体系列的名称超过一个字,必须使用引号2、字体样式font-style:normal;可选项:normal正常,italic斜体,oblique倾斜的文字,和斜......
  • css一般设置
    1、链接a:link-正常,未访问过的链接a:visited-用户已访问过的链接a:hover-当用户鼠标放在链接上时a:active-链接被点击的那一刻超链接a标签具有四个状态,可以基于css选择器进行选择a:hover必须跟在a:link和a:visited后面a:active必须跟在a:hover后面一个常......
  • css盒子模型
    1、介绍所有HTML元素可以看作盒子,包括:外边距margin边框border内边距(填充)padding实际内容:显示文本和图像,指定元素的width和height属性实际就是内容的宽度和高度2、边框(1)border-style样式none:默认无边框dashed虚线边框solid实线边框double两个边框groove3D沟槽......
  • div背景图的动态高度实现
    <divstyle="width:20%;border:2pxsolidblack;padding-bottom:8.43%;background:url('../assets/1bg.png')no-repeat;background-size:cover"></div>既然是动态,那么width就是当前盒子的百分比,高度通过padding值了撑高。举个例子,若是200x100的图片,那么宽高比就是2:......
  • 设置多个背景图片
     首先使用background-image:url("./images/logo.jpg") 来指定背景图片的路径使用background-repeat:repeat|repeat-x|repeat-y|no-repeat 来指定背景图片的重复次数使用background-size:14px|14%指定背景图片大小使用background-position:lefttop |  x%y%......
  • css实现艺术字
    最近在写一个新的小活动,本来有涉及艺术字的标题,本来是想用图片展示的,后来面向百度编程的时候,发现可以使用css来实现效果及代码如下font-size:60rpx;color:#fff;text-shadow:005px#FF0200,0010px#727272;text-align:center;margin:30rpxau......
  • CSS3 Media Query CSS3媒介查询
    通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之如下面代码:<style> /*max-width宽度小于600px*/ @mediascreenand(max-width:600px){ .one{background:#F9C;} span.lt600{display:inline......
  • Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the f
    这个错误的解决方案如下:1.禁用"computeStyles"修饰符的adaptive选项:这将允许平滑过渡,但可能会降低性能。禁用"computeStyles"修饰符的adaptive选项,可以在创建Popper实例时指定modifiers参数,并将computeStyles的adaptive属性设置为false。示例如下:import{create......
  • CSS引入方式及link和@import的区别
    1.概述1.1说明在项目开发中,我们经常使用css样式使页面丰富多彩,编写过程中,CSS有四种引入方式。 2.CSS引入方式2.1 引入方式一:内联样式内联样式(行内样式):直接在HTML标签中的style属性中添加CSS<divstyle="width:200px;height:200px;background:red;"></div>内联......
  • Respond.js让IE6-8 支持 CSS3 Media Query
    Respond.js是一个快速、轻量的polyfill,用于为IE6-8以及其它不支持 CSS3MediaQueries的浏览器提供媒体查询的 min-width和max-width特性。官方网址:https://github.com/scottjehl/Respond ......