background & background-image & border-image
background & background-image & border-image
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image
background & radius border
background color & view bug
https://codepen.io/xgqfrms/full/JQeqXQ
linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://codepen.io/xgqfrms/pen/WqEBLB
https://codepen.io/xgqfrms/pen/bPrymz
background-size
cover
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
.circle {
position: absolute;
width: 1.76rem;
height: 1.56rem;
line-height: 1.56rem;
/* background: url("../../images/guide/hexagon.png") cover no-repeat center center ; */
background: url("../../images/guide/hexagon.png") no-repeat center center ;
background-size: cover;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.28rem;
/* font-size: 0.16rem; */
color: #fff;
}
/* iphone 6/7/8 */
/* width: 375px & height: 667px */
@media (min-width: 375px) and (max-width: 375px) and (orientation: portrait) {
.circle {
position: absolute;
width: 1.76rem;
height: 1.76rem;
line-height: 1.56rem;
background: url("../../images/guide/hexagon.png") no-repeat center center;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.16rem;
color: #fff;
}
.menu-text31 {
transform: translateX(0.55rem) translateY(-0.15rem);
}
.menu-text32 {
transform: translateX(-0.35rem) translateY(0.3rem);
}
}
/* iphone 6/7/8 plus*/
/* width: 414px & height: 736px */
@media (min-width: 414px) and (max-width: 414px) and (orientation: portrait) {
.circle {
position: absolute;
width: 1.76rem;
height: 1.56rem;
line-height: 1.56rem;
background: url("../../images/guide/hexagon.png") no-repeat center center;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.16rem;
color: #fff;
}
.menu-text31{
transform: translateX(0.45rem) translateY(-0.15rem);
}
.menu-text32{
transform: translateX(-0.35rem) translateY(0.2rem);
}
}
background & background-image & border-image的更多相关文章
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- background不能填充margin的问题
CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色.background-image: 引用图片作为背景.background- ...
- css3之background
background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...
- background小结
CSS背景属性Background详解 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. ...
- background属性的学习整理转述
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
随机推荐
- python 9学习 高级特性
高级特性 掌握了Python的数据类型. 语句 和函数,基本上就可以编写出很多有用的程序了. 比如构造一个1, 3, 5, 7, ..., 99的列表,可以通过循环实现: L = [] n ...
- Google performance Tools (gperftools) 使用心得
Google performance Tools (gperftools) 使用心得 gperftools是google开发的一款非常实用的工具集,主要包括:性能优异的malloc free内存分配器 ...
- 洛谷P4127
Description 给出两个数 \(a\),\(b\) ,求出 \([a,b]\) 中各位数字之和能整除原数的数的个数 Solution 设 \(f[i][j][k][q]\) 表示 枚举到第 i ...
- LOJ10104Blockade
POI 2008 Byteotia 城市有 n 个城镇,m 条双向道路.每条道路连接两个不同的城镇,没有重复的道路,所有城镇连通.输出 n 个数,代表如果把第i 个点去掉,将有多少对点不能互通. 输 ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- 八:SpringBoot-集成JPA持久层框架,简化数据库操作
SpringBoot-集成JPA持久层框架,简化数据库操作 1.JPA框架简介 1.1 JPA与Hibernate的关系: 2.SpringBoot整合JPA Spring Data JPA概述: S ...
- Spring Cloud,Docker书籍资源、优秀博文等记录
Spring Cloud,Docker书籍资源.优秀博文等记录 Spring Cloud,Docker书籍资源.优秀博文等记录 一.书籍 二.博文地址 三.思维导图Or图片 3.1一张图总结 Dock ...
- 笔趣看小说Python3爬虫抓取
笔趣看小说Python3爬虫抓取 获取HTML信息 解析HTML信息 整合代码 获取HTML信息 # -*- coding:UTF-8 -*- import requests if __name__ ...
- Flutter--Dart基础语法(四)异步
前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,Flutter 开源.免费,拥有宽松的开源协议,支持移动.Web.桌面和嵌入式平台. Fl ...
- 将jekyll博客主页的超链接变为新标签页打开
将jekyll博客主页的超链接变为新标签页打开 最近发现在打开博文查看时往往不想关闭当前页面,想新建一个页面打开,查了HTML资料以后进行修改 在根目录找到index.html,打开编辑,找到图示&l ...