Name: CSS と HTML 5 - 画像上のテキストオーバーレイ (CSS and HTML 5 - Text Overlay on Images)
Uploaded: 2021-01-14T10:18:43.000Z
Duration: 23 min 45 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

to 不定詞

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

現在進行形

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

As you know, I am Eli the computer guy, and in today's class, I'm going to show you how to overlay text over your images in HTML documents using CSS.

This is one of those things where if you understand what the process is, it is very easy.

But if you do not understand what's going on, it's very complicated, frustrating, and you end with a complete mess.

So I'll be showing you how this works today.

Now, the important thing to understand when we start talking about over lane text over your images in your HTML documents using CSS is that's kind of sort of not actually what we're doing again.

One of the big problems the technology world, especially when you're learning technology, is you will look at something and you intrinsically think you understand what you're looking at.

And so then you try toe basically reverse engineer, figure out how to do it, and the issue that you run into is what you're looking at is not what you think you're looking at.

So when you try to figure out how to how to replicate it, it turns into a mess.

So when we start talking about overlaying text on images using CSS, that's kind of sort of not actually what we're doing now.

Don't get me wrong when you look at a Web page and there's an image and there's text over it.

Obviously the text is overlaying the image, but there's a little bit more going on than you may understand.

What's really happening here, and this is the way to think about it is that you're actually creating a canvas.

You're creating a canvas, and then you're positioning things within that canvas to present an image with overlay text.

So what happens is you created div of a serving class.

It's gonna be positioned, you know, wherever on the page and then from there, what you're going to dio is you're actually going to add an image to that defend.

So that image that has to be formatted properly to actually fit into that canvas fit into that debate that you've created and then passed that when you're going to be adding the text, you're essentially then going be adding text at specific positions in the dip right in that canvas that you've created, you're going to say from the from the top or from the bottom from left, wherever this is where I want the text to start being printed.

So realistically you could take the image away completely.

And still you could simply position the text within the DIV.

Basically on this canvas however you want.

But what we're doing is we're putting essentially the image as a background, and the text will be over top of it.

And it is that the Texas overlaying the image so is more.

It is important to understand what we're really doing here is we're positioning the text within the container within that div that we've created that happens to also have an image, right.

So with that, let's go over the computer.

So I can give you a demonstration and show you how this works.

So here we are, at my demonstration machine again, I'm using a Mac book.

So I used text edit to write these two files.

But all you need is an ask you text editor in order to write these basic types of scripts, eh?

So if you're in the Windows world, you can use note pad again, the macro Deacon's text at it.

If you're in Lenox World, you could use g et it nano them whatever it is that you want.

So the two files that it created today is I created one final called overlay dot html.

So this is the document that will open up in your in your Web browser.

As long as the end is either dot HTM or dot html.

It is then going to be pointing to a style sheet called overlay style dot CSS on.

Now, before we get into the actual code, let me show you the demonstration so that you understand what we're trying to accomplish today on.

Basically, this is the demonstration eso here.

I've given you the example of essentially two pictures.

Do you remember in the HTML world when you put an image on a document, all that is is a pointer.

So when I'm showing you, demonstrations with images usually just reuse the exact same image, you know, 1000 times just to make my life easier.

But if this was going to be on a web page, obviously in a production environment, this will be pointing to multiple different images.

But here again, I can basically point to the same image and show you the different things that I could D'oh eso essentially here I have two images on What I've done then is I've created a title.

So basically, I've created a title class and here for that title class, the the text is going to be white with a background of light gray.

I've been said that basically there is a div.

So what we have here is we have a debate that I have centered on the page and so within that defy I've said from the top and from the left, this is where the text should be printed.

Then for the p tag again for like let's say additional made it metadata down here.

Simply like taken, you know, july 4th, 2011.

This is an additional classes, a different class, and basically I've just said from the bottom and fromthe left, this is where they should be printed out.

When we go here and we take a look, I use an eight to tag again.

I can use different tags in order to to write out this text.

It will still have all the other default formatting s O that using a to tag and title another cool pick and then down here again, Let's say that's for when the picture was taken or whatever else.

This is really kind of cool here because what you can do is you can have the image.

So the image itself, this can be a hyperlink.

You know how you can create hyperlinks out of almost anything.

So the image itself could be a hyperlink.

And so this could be, let's say, the title of a blogger post to the title of the image.

This could be some metadata data down here basically to give you some additional information, maybe when it was published Category tags, that type of thing, other things you can think about for overlaying text over an image.

Now imagine if you had pictures that were you were sending up to some kind of machine vision a p i or serverless architecture, that machine vision a p I would then tell you give you tags of what it thinks is in those images.

And so basically, you could then create a web application where you see what the picture is.

And at the bottom, they could show that what the machine vision system tagged.

What does that machine vision system thinks is in the picture?

So you could do all kinds of stuff like that?

But basically, this is the example of what we're gonna be doing today.

So with this, in order to do it again, we have Thio two documents here.

Uh, first thing that we're gonna look at is the html document itself.

So this is what we'll be opening up in the web browser.

Eso As always, we're gonna open up the h him out we're gonna open up with tag or that the head.

And then we're going to link to the style sheet.

So again, the ref overlay style Nazi SS Since a silent she is in the same folder as Theeighty ml document.

It was in a different directory that I would put the full folder path to get to it.

We're gonna close the head, um, and then we're gonna open the body.

Now we're gonna get to the interesting parts and what I want you to understand is when we're taking a look at the image and the overlay and everything, all of that is within this one, def.

So basically, we're gonna create a diff think of us, Div as a canvas.

We're gonna be creating the canvas and they're gonna be putting everything into that campus s We have a debate about doing a div, and this class is going to be text overlay.

So I've created a class text overlay for this class text overlay.

The reason I put a position of relative using CSS is it allows me to position that that Div on the page.

So what I'm doing is I'm centering the div on the page.

So basically a position of relative margin hyphen left, auto market hyphen, right, Auto, that is going to center the debate now, an important thing to understand here is that I've been created a wit and I height for the death.

So the width is 300 pixels and the height is going to be auto.

So what I want to say is, I want I want this to be a maximum of 300 pixels wide on the height Will will be whatever the automatic will be, whatever the automatic is for the image, why that becomes important is we would go down here and the next thing that we're going to do is we're going to add to the image itself s o for the I.

We're gonna add an image and that is going to be picture a 700 dot j p g.

Now Why this is important is this is an image I have used numerous times the past that created it as an example Ah, a lot of classes ago and why it's called 700 is because it's 700 pixels wide.

Well, what do you think is going to happen if I put a 700 pixel image into a 300 pixel container?