【前端】背景缩放和渐变

背景缩放

Background-size

    background:     可放/*颜色 图片  平铺  位置  滚动*/;
    border: 1px solid red;
    /*background-size:  w  h 规定背景图像的尺寸;*/
    /*background-size: 100px  100px;*/
    /*background-size: 100px;  如果只有一个值  后面一个值默认为 auto  等比例缩放*/
    /*background-size: cover; 图片部分可能不完整，超出部分会被切掉 */
    /*background-size: contain;   div会包含图片*/

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
        /*background: -webkit-linear-gradient(top, red, green);*/
        /*background: -webkit-linear-gradient(left, red, green);*/
        /*background: -webkit-linear-gradient(left top, red, green);*/

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
        /*background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);*/

原文地址：https://www.cnblogs.com/Kighua/p/11575210.html

时间： 2024-10-09 21:12:54

【前端】背景缩放和渐变的相关文章

背景缩放

只有图片可以设置宽度和高度,背景图片可以通过: background-size:宽度高度; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen">

0074 二倍图：物理像素&物理像素比、背景缩放background-size

3.1物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的.这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334. 我们开发时候的1px 不是一定等于1个物理像素的. 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比. 如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放. lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度. 对于一张 50px * 5

UI基础--动画(缩放动画, 渐变动画, 左右振动, 移动动画, 组合动画)(封装好)

创建一个CAAnimation的类别 CAAnimation+HCAnimation .h #import <QuartzCore/QuartzCore.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, Axis) { AxisX = 0, ///< x轴 AxisY, ///< y轴 AxisZ ///< z轴 }; typedef NS_ENUM(NSInteger, ShakeDerection) {

前端背景图片

背景图片 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片</title> <style> .box { width: 300px; height: 300px; background-color: orangered; } .box { /*显示比屏幕大的图片:缩放尺寸*/ /*background-image: url(

[前端]背景上升效果,html+css

给我一个渐变的效果鼠标移入能看到效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d1{width: 200px; height: 200px; background: green; position: relative; overflow

tips 前端背景与元素的透明和模糊

碰到好几次这样的情况了: 一个带点儿文艺效果背景图片模糊而一行别致的文字清晰的悬浮在背景上(口胡,加点美好的想象,生活会更美好) 第一反应是 this is easy. cause i know css have attribute like(blur,opacity)好像很容易,顶多再加点儿 1 -moz-opacity:0.5; 2 filter:alpha(opacity=50); /* 针对 IE8 以及更早的版本 */ 3 -webkit-filter: blur(3px); /*

css背景颜色动态渐变实例

1.https://www.imooc.com/article/27831 2.https://blog.csdn.net/lolgenius/article/details/70169493 3.https://www.lanrenzhijia.com/js/3905.html 4.https://www.html5tricks.com/html5-3d-bubble-menu.html 5.条纹背景 6.背景色从做慢慢移到右原文地址:https://www.cnblogs.com/lile

[前端]背景图,中间放大特效

1.看效果 <!doctype html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> .bg{width:550px;height:550px;margin:0 auto;vertical-align:center;border-top:1px solid transparent} #cricle{bord

css3基础 background-size 背景缩放

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu