Mobile Platform as a Service:Background information

Background Style

There are several ways to specify the background style of an element:

• background-color, which defines the background color of the element.

  Properties	Value type	Default Value	Way of writing
  background-color	color unit	transparent	background-color:red;

• background-image, which defines the background image of the element.

  Properties	Value type	Default Value	Optional value	Way of writing	Remarks
  background-image	string	N/A	url("https:/xxx") Alibaba Cloud Content Delivery Network address; url("./xxx") offline package relative address; url("data:") base64 encoding; linear-gradient(s1,s2,…,slast), the first segement (gradient angle setting, the value is that the specific angle value ends with deg, or the direction description, including top, to top, right, to right, bottom, to bottom, left, to left), the second segement (gradient starting color setting, color unit; If there is a percentage value, it must be 0%), middle segment (gradient process color setting, color unit; Percentage value is supported and must be linearly increasing. If no percentage is provided, the color proportion will be evenly divided), and the last segment (gradient end color setting, color unit; If there is a percentage value, it must be 100%); none: clears the background.	background-image: linear-gradient(45deg, red 0%, #333 50%, rgb(255,0, 255) 80%, green 100%);	N/A
  				background-image: linear-gradient(to top,red, #333, rgb(255, 0, 255), green);
  				background-image: url("https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png");
  background-size	String or length unit	auto	Single description value (cover,contain,auto); ${x}px ${y}px double exact length unit + percentage; ${x}px Single Value Length Unit + Percentage;	background-size:contain;	If the exact value or percentage is only a single value, the other value defaults to auto.
  				background-size:100px 200px;
  background-position	string	0	Single description value (top,right,bottom,left,center); double description value (bottom right); ${x}px single value length unit /${y}px single value length unit + single description value; ${x}px single value length unit + percentage;${y}px single value length unit + percentage	background-position:top;	If you have a single value, the other value is centered by default.
  				background-position:bottom right;
  				background-position:30px left;
  				background-position:100px;
  				background-position:50px 50px;
  background-repeat	string	repeat	repeat-x, repeat-y, no-repeat, repeat	Single value: background-repeat: repeat-x;	N/A
  				Double values: background-repeat: repeat no-repeat; where the x-axis description contains (no-repeat, repeat) and the y-axis description contains (no-repeat, repeat)	N/A

• Background:

  • Background-color and background-image related styles can be combined and shorthand, regardless of the order;

  • background-image-related styles can incorporate shorthand, such as background-image and background-repeat;

  • Support the use of none to remove the background;

Example

background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') repeat-x;
background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') #f0f no-repeat;
background:url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') #00f repeat-x bottom;
background:#ff0 url('https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png') repeat-y right;

Examples of basic usage of backgrounds

div
{
	background-image:url('img_tree.png');
	background-repeat:repeat;
}

Shadow

Used to set the element's shadow.

Example of basic use of shadows

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

Transparency