首页 > 其他分享 >背景图高度铺满，宽度自适应

背景图高度铺满，宽度自适应

时间：2023-10-31 23:48:06浏览次数：26

header {
  max-width: 100vw;
  height: calc(100vh - 66.51px);
  position: relative;
  background-position: center;
  background-size: auto 100%;
}

效果

标签：铺满,适应,宽度,background,position,背景图
From： https://www.cnblogs.com/tobycold/p/17802021.html

p5.js 到底怎么设置背景图？
本文简介点赞+关注+收藏=学会了在《p5.js光速入门》里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。本文就把背景图这部分内容补充完整，并且会提到在p5.js里使用背景图的一些注意点。背景图的用法在p5.js里使用背景图只需做以下几步......
qt 设置背景图片，图片出现锯齿
qt给控件添加背景图片，通过有3种方式background-image;border-image;image其中通常用border-image;image。使用border-image，会出现图片失真，锯齿状严重ui->pushButton->setStyleSheet(“QPushButton{border-image:url(:/images/XXX.png);}”);使用image，会有边框，不适合qpushBu......
uniapp 预览pdf app端使用自定义导航时铺满全屏，需要留出导航栏
1、安装pdf预览插件：hybrid插件（网上资料很多） 2、封装预览vue页面（重点在加粗部分，使用原生导航没有问题，但是使用自定义导航就把状态栏全部盖住了）<template><viewclass="page"><web-view:webview-styles="webviewStyles":src="src"></web-view>&l......
html 数字，字母超出标签设定的宽度问题
前因：做一个表格页面时，其中有一列网址数据，但这些内容总会超出表格设定的宽度范围，中文就不会，就类似下面这样：解决（样式中增加下面代码）：word-wrap:break-word; 效果： ......
使用CSS的cross-fade()实现基于url的网页背景图半透明显示
参考链接：https://www.zhangxinxu.com/wordpress/2020/07/css-cross-fade-background-image-opacity/引子在开发过程中，碰到了一个比较特别的情况，就是使用url()背景图像，同时又希望background-image背景图片是半透明的，作为网页的半透明背景图，这时候使用opacity，如果使用某一个大......
962. 最大宽度坡（权值线段树，权值树状数组）
本题要快速找到某个数字在数组中左边<=它的数的最小下标。可以建立一个权值线段树，nums[i]处维护最小下标。classSolution{public:conststaticintN=50010,INF=0x3f3f3f3f;structNode{intl,r,v;}tr[N*4];voidpushup(int......
Java 导出Excel根据单元格内容计算并设置列宽度、行高
话不多说，上代码：importorg.apache.poi.ss.usermodel.*;importorg.apache.poi.ss.util.CellRangeAddress;importjava.util.HashMap;importjava.util.Map;importjava.util.Objects;/***根据单元格内容计算并设置列宽度、行高*/publicclassExcelUtil{//......
使用base64数据做背景图片，IE无法显示
div{width:100px;height:100px;background-position:centercenter;background-repeat:no-repeat;background-size:100px100px;background-image:url('data:image/svg+xml;utf8,%3Csvg%20t%3D%221636092321349%22%20class%3D......
echarts容器的宽度根据父元素宽度变化进行自适应
根据浏览器窗口大小变化进行自适应，使用window.onresize=()=>myChart.resize()浏览器窗口不变，容器大小变化（例如：侧边菜单栏收缩），vue3为例letmyChart=null;onMounted(()=>{setTimeout(()=>{//渲染画布方法getEchart();//画布自适应代码constresi......
vue2自定义指令实现el-dropdown下拉菜单项最小宽度等于内容宽度
//在main.js添加Vue.directive('siem-dropdown',function(el,binding,vNode){letul=el.querySelector("ul")letuid=vNode.componentInstance._uid;//获取下拉菜单实例的uidletsiemDropdownClass=`siem-dropdown-${uid}`;ul.cla......

背景图高度铺满，宽度自适应

相关文章

赞助商

阅读排行