background-position: left top; bg-right background-position: right; bg-right-bottom background-position: right bottom; bg-right-top background-position: right top; bg-top background-position: top; bg-(position:<custom-property>) background-position: var(<custom-property>); ...
bg-left-topbackground-position: left top; bg-rightbackground-position: right; bg-right-bottombackground-position: right bottom; bg-right-topbackground-position: right top; bg-topbackground-position: top; Functionality of Tailwind CSS Background Position Classes ...
其中一个例子是添加新的键,为多个核心插件之间的共同值创建一个单一的真实来源。例如,您可以提取一个共享的positions对象,它可以被backgroundPosition和objectPosition插件引用。 // tailwind.config.jsmodule.exports={theme:{positions:{bottom:'bottom',center:'center',left:'left','left-bottom':'left bottom',...
exports = { corePlugins: { float: false, objectFit: false, objectPosition: false, } } 如果您想安全地列出哪些核心插件应该被启用,请提供一个数组,其中包括您想使用的核心插件的列表。 // tailwind.config.js module.exports = { corePlugins: [ 'margin', 'padding', 'backgroundColor', // ... ...
background-size:auto | cover | contain; 当图片大小超过容器大小时,cover属性值会对背景图片进行裁剪,所以一般会配置background-position属性来决定显示图片内容的位置。 contain属性会将图片缩小以在容器中显示完整图片,多数情况下由于容器宽高比例与图片比例不同,因此造成图片与容器上下或左右留白的情况。
backgroundPosition The background-position utilities like bg-left-top backgroundRepeat The background-repeat utilities like bg-repeat-x backgroundSize The background-size utilities like bg-cover blur The blur utilities like blur-md borderCollapse The border-collapse utilities like border-collapse borde...
background-image: var(<custom-property>); bg-conic-[<value>] background-image:<image>; from-<color> --tw-gradient-from:<color>; from-<percentage> --tw-gradient-from-position:<percentage>; from-(<custom-property>) --tw-gradient-from: var(<custom-property>); ...
module.exports = { // 禁用未使用的核心插件 corePlugins: { float: false, objectFit: false, objectPosition: false }, // 禁用未使用的变体 variants: { extend: { backgroundColor: ['hover', 'focus'], // 移除不需要的变体 opacity: ['hover'] } } } 工程化实践 模块化配置 // config/theme...
.background{background:url('01.jpg')no-repeat center center/cover;position: absolute;top: -20px;bottom: -20px;left: -20px;right: -20px;z-index: -1;filter:blur(20px);} JS代码: constpassword =document.getElement...
我已经很好地尝试了一些东西,比如jQuery animate函数:animate("backgroundPosition: "-" + $(window).width() + " 0px"); 它与以下插件配合使用得很好它的静态效果很好,但我不能想出一种平滑的方法来移除这个(到侧面),同时从左边加载另一个图像,并滑动到替换旧的图像。