Make image background transparent with CSS

If you have a opaque image and it doesn't align with the background of your webpage, you can make the background transparent with CSS


<style>
.bg-blend{
 background: url("https://images.hertz.com/vehicles/220x128/ZEUSECAR999.jpg");
 background-color: #f0f5f9;  
 background-blend-mode: multiply;
 height: 128px;
 width: 220px;
}
</style>
<body>  
    <div class="bg-blend"></div>
</body>


Location: Issaquah, WA, USA

Comments

Post a Comment

Popular posts from this blog

Simple Invoice Creation With Jasper Report

Image
<?xml version="1.0" encoding="UTF-8"?> <jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="invoicePdf" pageWidth="595" pageHeight="842" columnWidth="535" leftMargin="30" rightMargin="30" topMargin="30" bottomMargin="50">     <property name="ireport.zoom" value="1.5"/>     <property name="ireport.x" value="0"/>     <property name="ireport.y" value="140"/>     <property name="ireport.callouts" value="##Fri Mar 30 16:17:30 NPT 2012"/>     <style name="table">         <box>             <pen li
Read more

Dynamic Image in Jasper Report

jrxml content <image>                 <reportElement x="5" y="5" width="200" height="90"/>                 <imageExpression class=" java.awt.Image "><![CDATA[$P{logo}]]></imageExpression>             </image> Java Code to convert image from URL into BufferedImage        URL url = new URL("http://localhost/image/image.jpg");         // Read the image ...         InputStream inputStream = url.openStream();         ByteArrayOutputStream baos = new ByteArrayOutputStream();         byte[] buffer = new byte[1024];         int n = 0;         while (-1 != (n = inputStream.read(buffer))) {             baos.write(buffer, 0, n);         }                 baos.flush();         byte[] imageInByte = baos.toByteArray();         baos.close();         // convert byte array back to BufferedImage         InputStream in = new ByteArrayInputStream(imageInByte);         BufferedImage
Read more

Auto Increment Oracle Table Id Mapping With JPA Entity

When you create entities file of the mysql table with JPA, auto increment field 'id' is mapped as follows.     @Id        @GeneratedValue(strategy = GenerationType.IDENTITY)     @Basic(optional = false)     @NotNull     @Column(name = "id")     private Long id; However, Oracle doesn't support auto increment. Hence sequence generator is set up for the field id of table. The respective entity mapping for 'id' should be changed as below.     @Id        @GeneratedValue(strategy = GenerationType.IDENTITY)     @Basic(optional = false)     @NotNull     @Column(name = "id")     private Long id;     @SequenceGenerator(initialValue=1, sequenceName="INVOICE_SEQ",allocationSize=1,name="invoice_seq_name")     @GeneratedValue(generator="invoice_seq_name")
Read more