gpt4 book ai didi

css - 如何使用 LESS 混合多个背景

转载 作者:行者123 更新时间:2023-11-28 08:59:57 25 4
gpt4 key购买 nike

我有一个小问题...是否有任何选项可以将多个背景与 LESS 混合?

我在 LESS 中有这样的背景设置:

.background_centered(
@url,
@position_horizontal: center,
@position_vertical: top,
@background-repeat: no-repeat,
@transparency: transparent) {
background: @arguments;
}

现在:我需要写出具有多个背景的输出样式,所以我这样做:

.class {
.background_centered(url('../img/war_top_baner_gp.png'),url('../img/war_header_bg.png'));
}

在最终输出中有些东西不对 bc 我有这个:

background: url('/../img/war_top_baner_gp.png') 
url('/../img/war_header_bg.png') top no-repeat transparent;

怎么了?是否可以这样做?

最佳答案

我不知道 less 原生具有应用/循环遍历 mixin 的所有参数的功能,但是有很多选项可以解决这个问题。

您可以将自定义 javascript 函数添加到执行您想要的操作的 less block 中。 Here is a link to a nice reference for custom functions .

但是你也可以在 less 中构建一个小循环:

    // for loop
.for(@l,@obg,@i:1) when (@l > @i) {
@nbg: `@{url}[@{i}]`;
@bg: ~"@{obg}, @{nbg} @{rest}";
.for(@l, @bg, @i + 1);
}

// multiple background urls + additional bg properties
.bgmixin(@url, @rest){
@num: unit(`@{url}.length`);
@bg: ~`@{url}[0]` @rest;
.for(@num, @bg);
background: ~"@{bg}";
}

// defining bg urls
@url: 'url("../img/war_top_baner_gp.png")', 'url("../img/war_header_b‌g.png")';

// including the bgmixin in .class
.class{
.bgmixin(@url, center top no-repeat transparent);
}

输出是

    .class {
background: url("../img/war_top_baner_gp.png") center top no-repeat transparent,
url("../img/war_header_b‌g.png") center top no-repeat transparent;
}

如果我没理解错的话,这就是您想要的。


编辑:我只是想在这里补充一点,我的想法是找到一个更通用的解决方案,它实际上是循环/递归数组元素,这使得使用不同的属性及其各自的属性变得容易images - 所以你给函数提供一个 url 数组和一个其他属性数组。在这里,我将尝试说明这个想法:

    .for(@l,@obg,@i:1) when (@l > @i) {
@nbg: `@{url}[@{i}]`; @nattr: `@{attr}[@{i}]`;;
@bg: "@{obg}, @{nbg} @{nattr}";
.for(@l, @bg, @i + 1);
}

.bgmixin(@url, @attr){
@num: unit(`@{url}.length`);
@bg: ~`@{url}[0]` ~`@{attr}[0]`;
.for(@num, @bg);
background: ~"@{bg}";
}

@urls: "url('../img/centered_image_bg.png')", "url('../img/left_image_bg.png')";
@attr: "center top no-repeat transparent", "left top y-repeat";

.class{
.bgmixin(@urls, @attr);
}

输出将如下所示:

    .class {
background: url('../img/centered_image_bg.png') center top no-repeat transparent,
url('../img/left_image_bg.png') left top y-repeat;
}

关于css - 如何使用 LESS 混合多个背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15412940/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com