html - Overlay several images -


I have three images that I want to overlay (with HTML + CSS, I not If you want to use Javascript if possible):

image1 < Img src = "https: // I.stack.imgur.com/WQSuc.png" alt = "image2"> Image3

This is the result that I want to get: my favorite result < Br> [image4]

This is what I have tried:

CSS: 

  .imageContainer {status: relative; } # Image1 {Status: Completed; Top: 0; Z-index: 10; Border: 1px solid blue; } # Image2 {Status: Completed; Top: 0; Z-index: 100; Border: 1 px solid flame; } # Image3 {Status: Absolute; Top: 0; Z-index: 1000; Width: 10%; Height: 10%; Border: 1 px solid green; }   
 HTML:  
  & lt; Div class = "imageContainer" & gt; & Lt; Img id = "image1" src = "http://i.stack.imgur.com/Es4OT.png" /> & Lt; Img id = "image2" src = "http://i.stack.imgur.com/WQSuc.png" /> & Lt; Img id = "image3" src = "http://i.stack.imgur.com/Xebnp.png" /> & Lt; / Div & gt; Line   
  image1 : "main" image  (image1 should set maximum height and maximum width for an image - HTML above)  [Blue border] 
  image2 :  horizontal-align: center;  and  Top: 0;  relative to image 1 [pink border] 
  image 3 : its original size,  horizontal-align: center  related to image in size by 10% 1 [Green border] 
  
 My error HTML + CSS pronounced as: Enter image details here  
 I can not figure out how my CSS should be supposed to get me the results like [image4]?   
 
 
 You can create it with a div, for example more background:  
  #someDiv {background: url ('topImage.jpg') center, url ('imageInTheMiddle.jpg') 0px 0px, url ('bottomImage.jpg') / * some status * /; }   
 This simple way of displaying it was definitely, where I put the positioning value, you have to add one of your.  
  UPDATE   
 In the case you say, I think you can use 3 full position divisions with your status and give them CSS 3 Manipulate with  transform  attribute. It gives the possibility of roaming, scale and more with your elements. And you can manipulate it with javascript too.

Comments

Post a Comment

Popular posts from this blog

Python SQLAlchemy：AttributeError: Neither 'Column' object nor 'Comparator' object has an attribute 'schema' -

I tried to create a new database in my project, but when I run the script, I get this error, I have another project, this type of definition worked before, but now it gets a single error. I am using Python 2.7.8 and the version of SQLAlchemy module is 0.9.8. By the way, using a project flask- SQLAlchemy, it works well, I'm confused. Traceback information is as follows: Traceback (most recent call final): File "D: / Projects / IOM / db_create.py", line 4, & lt; Module & gt; From the models the base file "D: \ Projects \ OO-IM \ models.py", in line 15, in the & lt; Module & gt; Column ( 'followed_id', int (), ForeignKey ( 'user.id')) file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ schema.py", line 369, __new__ schema = metadata. Schema file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ elements.py", line 662, AttributeError in __getattr__ key): Neither 'column' object nor ...
Read more

java - How not to audit a join table and related entities using Hibernate Envers? -

I use Eners to be hibernate to audit my institutions. I have an audit entity, Foo , which includes a list & lt; Bars & gt; However, I do not want to audit the bar institutions, in the form of properties, I have written that: @inti @edicated public class Foo {@JoinTable (name = "T_FOO_BAR", joinColumns = @JoinColumn (name = "FOO_ID"), inverseJoinColumns = @JoinColumn (Name = "BAR_ID")) @ManyToMany (Cascade = Persist) @ Indited (targetAuditMode = RelationTargetAuditMode.NOT_AUDITED ) Public listing & lt; Bars & gt; GetBars () {Return bars; }} Now, I want to retrieve an amendment of foo : AuditReader reader = AuditReaderFactory.get (GetEntityManager ()); FU modification = (FU) reader.CreativeTeA () .entensEtrevision (Foo Class, 42) .getSingleResult (); Unfortunately, when I want to retrieve all the data (i.e. when it loads lazy times ), error me ORA-00942: table or view is not present , because Tried to query this: Sel...
Read more

mongodb - CakePHP paginator ignoring order, but only for certain values -

While pagging my user model in kppp, I can sort with some values, but not others. For example, I can order results from created or email , for example, but username or reputation seems to come back order by arbitrary command for example with a list of users: $ this-> paginate = array ('condition' => array ( 'User.is_active' = & gt; true), 'border' => 24, 'order' => array ('User.created' => DESC)); Works as expected, but $ this - & gt; Paged = array ('conditions' = & gt; array (' user.isIactive '= & gt; true),' border '= & gt; 24,' command '= & gt; array (' user repeats' = ' & Gt; DESC ')); No, no. I first thought that this could be a database issue, but when I search the database directly, sorted as expected. Note: I am using Mangodebi with the Mongo DB plugin of Ichikawa for the KPPHP; Pagnetizing users are used to work properl...
Read more