How to add a mask to an image using CSS ?

How to add an image as the list-item marker in a list using CSS ?

Last Updated : 15 Oct, 2020

The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS.

Syntax:

list-style-image: none | url | initial | inherit;

Example:

html

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-image: url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        How to add an image as the
        list-item marker in a list using CSS?

    </h2>

    <p>Programming Languages</p>

    <ul>
        <li>c++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>python</li>
    </ul>
</body>

</html>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to add a mask to an image using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to add a mask to an image using CSS ?

The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper

How to Add Image in Text Background using HTML and CSS ?

In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag

How to add a button to an image using CSS ?

In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope

How to Place Text Blocks Over an Image using CSS?

Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.Below are the approaches to place text blocks over an image using CSS:Table of Content Using Absolute Positioni

How to use Google material icon as list-style in a webpage using HTML and CSS ?

Icons can be added to our HTML page from the icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, colour, shadow, etc. They play a considerate part in materialize CSS. Materialize CSS provides a rich set of material icons of google which ca

How to Set the List Style Image in Tailwind CSS ?

Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all the building blocks you need. These are the following approaches by using these we can customize the list-style image: Table of Content List Style Image