时间戳

首页 > 解决方案 > 如何为 elementor 的图像轮播添加更多颜色

css - 如何为 elementor 的图像轮播添加更多颜色

问题描述

我想请你帮忙。我正在用 elementor 构建 wp 网站（我不知道如何编码），我想为图像边框或图像标题的文本添加不同的颜色。支持不会帮助我使用css ...

我可以更改轮播中所有图像的边框颜色

selector img { border: 5px solid red; }

但我想添加 6 张带有 6 种不同颜色边框或不同颜色标题颜色的图像。（不知道用什么css）

在自定义 css 选项卡下有这样写：

使用“选择器”来定位包装元素。例子：

selector {color: red;} // For main element
selector .child-element {margin: 10px;} // For child element
.my-class {text-align: center;} // Or use any custom selector

谢谢

加里克

标签： cssimagecarouselelementor

解决方案

There are a few different ways this can be done, but selector isn't a real element so it may be hard to pinpoint exactly what is needed. For instance, the selector would have to be an HTML element like div.

You can: 1: look for the IDs for those images (#my-id) or 2: look for specific class names (.my-class, the . signifies that it's a class) for those images (if they are there) 3: use the pseudo-selector like first-child, last-child, nth-child

Let's look at the second option since that's closer to best practice:

  1. you'll want a general CSS rule like the selector image one, but we won't have the color on it.
div img { border: 5px solid; }

// Below would be better because the above looks at ALL images in a div tag ... So that can turn into ... all images on a page.

.container-class-name img { border: 5px solid; }

All images in a div will have a solid border of 5px. It'll default to black without the next part.

  1. Now the individual images. Let's say each has a class with image-{number}, so those classes would be like image-one, image-two, etc.
.image-one { border-color: red; }
.image-two { border-color: blue; }
.image-three { border-color: yellow; }

Hex color codes are better than using browser ones like red, blue, yellow and etc. If you don't know what those are I would highly suggest reading up on them.

You have to be both very general and specific when it comes to CSS and learn where each idea needs to be used.

推荐阅读