I don't think CSS can do that. But you can hack it together using three different nested elements:
- The outermost element contains the background-image
- The middle element contains the middle image
- The inner element contains the text, and has the same background image as the outermost element, masked with
background-clip:text;
like on your first example.
This works, but is a little cumbersome, as you'll have to compensate the masks background-position to achieve the desired effect. Here is an example: http://jsfiddle.net/dzkTE/.